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

type =添加按钮
e.preventDefault（）删除或也使type = button
使用一个容器作为输入，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>

像这样个人-需要删除所有最近的兄弟姐妹，包括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>

Answer 2

您可以像这样从DOM中删除元素：

要删除指定的元素而不必指定其父节点：

function removeEl(id) {
  let node = document.getElementById(id);
  if (node.parentNode) {
    node.parentNode.removeChild(node);
  }
}

MDN Docs

因此，在您的情况下，您可能需要在创建文本字段时添加一个ID，以便能够再次找到它然后将其删除：

<script>
function myFunction() {
  let wrapper = document.getElementById("dynamic-question");

  var form = document.getElementById("myForm");
  var input = document.createElement("input");
  // Add id here
  input.id = "[id_here]"


  wrapper.appendChild(input)
  wrapper.appendChild(document.createElement("br"));
  wrapper.appendChild(document.createElement("br"));
}
</script>

然后您可以像上面这样调用上面的函数：

removeEl("[id_here]")

Answer 3

您可以尝试创建类似按钮的链接，可以将功能附加到该按钮上，如下所示：

function myFunction() {
  let wrapper = document.getElementById("dynamic-question");

  var form = document.getElementById("myForm");
  var input = document.createElement("input");
  var btn  = document.createElement("button");
  btn.textContent = "Remove";
  btn.addEventListener('click', remove);
  wrapper.appendChild(input);
  wrapper.appendChild(btn);
  wrapper.appendChild(document.createElement("br"));
  wrapper.appendChild(document.createElement("br"));
}
function remove(){
  this.previousSibling.remove(); //Remove the input
  this.nextSibling.remove();     //Remove the first br
  this.nextSibling.remove();     //Remove the second br
  this.remove();                 //Remove the button
}

button:not(:first-child) {
  background:none!important;
  color:inherit;
  border:none; 
  padding:0!important;
  font: inherit;
  border-bottom:1px solid #444; 
  cursor: pointer;
}

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

Answer 4

尝试一下：

对于您动态添加的每个元素，创建一个div并添加带有某个类的remove链接，然后添加一个侦听器，当用户单击remove链接时，该监听器将删除该元素以及父元素（该链接的div并且输入在内部）。

//annonymous function
var btnAddField = document.getElementById("btnAddField");
var wrapper = document.getElementById("wrapper");

btnAddField.onclick = function() {
var div = document.createElement('div');
	var input = document.createElement("input");
  var removeLink = document.createElement("a");
  removeLink.innerHTML = 'Remove input';
  removeLink.className = "btn-remove";
  div.append(input);
  div.append(removeLink)
  wrapper.append(div);
};

 document.addEventListener('click',function(e){
    if(e.target && e.target.className == 'btn-remove'){
          e.target.parentNode.remove();
     }
 });

<div id="wrapper">
<button id="btnAddField">
 Add input field
</button>
</div>

如何使用dom删除文本字段

4 个答案: