如何删除特定的子节点

Question

我有以下代码

  <script>        
      function delete(){
          var e = document.getElementById('parent');
          e.removeChild(e.children[0]);
      }
</script>

  <div id="parent">
      <div id="child">
          <input type="text" placeholder="name"> 
          <button onclick="delete()"> delete</button>
      </div>
    
      <div id="child">
          <input type="text" placeholder="age"> 
          <button onclick="delete()"> delete</button>
      </div>
  </div>

当我按下删除按钮时，第一个子节点被删除。但是，我只想删除特定的子节点。例如：如果我在名称输入字段中单击删除按钮，则应仅删除名称输入字段。

Answer 1

试试这个：

function delete(){
    $(this).parent().remove()
}

并且您不能对不同的 div

使用相同的 id

Answer 2

看看这两行：

var e = document.getElementById('parent');    
e.removeChild(e.children[0]);

这里你通过它的id获取一个元素，id是'parent'。这将始终为您提供 div.

然后你删除第一个child的e.

您需要一种不同的方法来获取要删除的元素！

第一步是查看您的目标事件处理程序：

   function delete(ev){
     var target = ev.target;
     console.log("the element that was clicked is ", target);
     // continue from here
   }

Answer 3

这是一个完整的示例。

function deleteNode(item){
    item.parentNode.remove()
}

 <div id="parent">
     <div id="child">
      <input type="text" placeholder="name"> 
      <button onclick="deleteNode(this)"> delete</button>
     </div>

     <div id="child">
      <input type="text" placeholder="age"> 
      <button onclick="deleteNode(this)"> delete</button>
     </div>
</div>

Answer 4

首先，delete 是一个 reserved keyword 您不能将它用作函数名称。

其次，您必须传递被单击元素的引用。这可以通过将 this 参数传递给您的 onclick 处理程序来实现：

<button onclick="deleteParent(this)"> delete</button>

这将导致以下结果

 <div id="parent">
     <div>
      <input type="text" placeholder="name"> 
      <button onclick="deleteParent(this)"> delete</button>
     </div>

     <div>
      <input type="text" placeholder="age"> 
      <button onclick="deleteParent(this)"> delete</button>
     </div>
 </div>

 <script>
   function deleteParent(btn){
     btn.parentNode.remove();
   }
 </script>

您也不应该在多个元素上使用相同的 id。

如何删除特定的子节点

How to Delete a Specific Child Node

html

javascript

dom

event-handling