javascript - 如何使用 dom 删除文本字段

Question

我有一个表单，允许用户在单击按钮时添加textfield 我想在每个添加的 textfield 下面添加允许删除它的链接

这是脚本

   <script>

function myFunction() {
      let wrapper = document.getElementById("dynamic-question");
      var input = document.createElement("input");
      var del = document.createElement("button");
      var div = document.createElement("div");
      del.className = "del"
      del.innerText = "X"

      div.appendChild(input)
      div.appendChild(del)
      div.appendChild(document.createElement("br"));
      div.appendChild(document.createElement("br"));
      wrapper.appendChild(div)
    }

    document.getElementById("dynamic-question").addEventListener("click",function(e) {
      if (e.target.className=="del") {
        e.target.closest("div").remove()
      }
    })
</script>

这里是 html 代码

<form id="myForm" method="POST" action="./gett">
<label for="question"> Question </label> <br>
<input class="champ" type="textarea" name="question" id="question" value=""><br><br>

<label for="ans"> Answers </label> <br>

<input type="text" name="ans1" id="ans1" value=""><br><br>

<input type="text" name="ans2" id="ans2" value=""><br><br>

    <div id="dynamic-question"></div> 

<button type="button" onclick="myFunction()">Add proposition</button> <br><br>

<input type="submit" value="submit">
</form>

Answer 1

1. 添加时键入=按钮
2. e.preventDefault() 在按钮上删除或也使 type=button
3. 使用一个容器来容纳输入、BR 和删除，一次性将它们全部删除

然后调用remove

function myFunction() {
  let wrapper = document.getElementById("dynamic-question");
  var input = document.createElement("input");
  var del = document.createElement("button");
  var div = document.createElement("div");
  del.className = "del";
  del.innerText = "X";
  del.type="button";
  
  div.appendChild(input);
  div.appendChild(del);
  div.appendChild(document.createElement("br"));
  div.appendChild(document.createElement("br"));
  wrapper.appendChild(div);
}

document.getElementById("dynamic-question").addEventListener("click",function(e) {
  if (e.target.className=="del") {
    e.preventDefault();
    e.target.closest("div").remove();
  }
})

<button type="button" onclick="myFunction()">Add</button>
<div id="dynamic-question"></div>

像这样单独 - 所有最近的 sibling 都需要删除，包括 BR

function myFunction() {
  let wrapper = document.getElementById("dynamic-question");
  var input = document.createElement("input");
  var del = document.createElement("button");
  del.className = "del";
  del.type="buttpn"
  del.innerText = "X";
  
  wrapper.appendChild(input);
  wrapper.appendChild(del);
  wrapper.appendChild(document.createElement("br"));
  wrapper.appendChild(document.createElement("br"));
}

document.getElementById("dynamic-question").addEventListener("click",function(e) {
  if (e.target.className=="del") {
    e.preventDefault(); 
    e.target.previousElementSibling.remove(); // remove field
    e.target.nextElementSibling.remove(); // remove br
    e.target.nextElementSibling.remove(); // remove br
    e.target.remove();
  }
})

<button type="button" onclick="myFunction()">Add</button>
<div id="dynamic-question"></div>