用纯JavaScript在点击时移除父元素

Question

我正试图学习在纯JavaScript中完成我以前在jQuery中完成的任务。

我发现了一个例子来解决我的问题，但这真的让我很困扰。

我正在尝试点击button.remove时删除父级div.single。

以下是代码：

 var btn = document.getElementsByClassName('remove')
    
 for (var i = 0; i < btn.length; i++) {
    btn[i].addEventListener('click',function (e) {      
      e.parentNode.parentNode.removeChild(e.parentNode);
    } , false);
 }

 <div class="single">
    <img src="http://via.placeholder.com/150x150">
    <button type="button" class="remove">X1</button>
  </div>
  <div class="single">
    <img src="http://via.placeholder.com/150x150">
    <button type="button" class="remove">X2</button>
  </div>
  <div class="single">
    <img src="http://via.placeholder.com/150x150">
    <button type="button" class="remove">X3</button>
  </div>
  <div class="single">
    <img src="http://via.placeholder.com/150x150">
    <button type="button" class="remove">X4</button>
  </div>

我遇到了错误e.parentNode is undefined。

这是我需要的相同功能的jQuery代码。

$(document).ready(function() {  
  $(document).on('click', '.remove', function () {    
    $(this).parent('.single').remove()
  })
})

感谢任何回答。

- iamwtk

---

你需要使用 e.target.parentNode。e 对象是事件对象，而不是节点。它的 target 属性引用了节点。 - trincot

在该方法内将“e”替换为“this”。 - gurvinder372

两种解决方案都可以，谢谢大家。 - iamwtk

Answer 1

要以简短的方式删除父节点：

<div class="single">
   <img src="http://via.placeholder.com/150x150">
   <button type="button" onclick="return this.parentNode.remove();" class="remove">X</button>
</div>

- Tarek Kalaji

---

我必须说我更喜欢这个，因为它对于动态创建的元素也非常有效。想象一下构建一个页面，其中元素是动态添加的，而不是 OP 版本中在加载时就呈现的元素，这将最好地将其附加到该特定元素作为子节点。太棒了！ - Mr. Benedict

这个答案非常完美！在我的情况下，我正在删除一个祖父节点，所以我使用了 this.parentNode.parentNode.remove()。 - neicore

Answer 2

你需要从事件对象(currentTarget/target)中获取元素的引用。

注意：所有现代浏览器都支持Node.remove()。

var btn = document.getElementsByClassName('remove')

for (var i = 0; i < btn.length; i++) {
  btn[i].addEventListener('click', function(e) {
    e.currentTarget.parentNode.remove();
    //this.closest('.single').remove() // in modern browsers in complex dom structure
    //this.parentNode.remove(); //this refers to the current target element 
    //e.target.parentNode.parentNode.removeChild(e.target.parentNode);
  }, false);
}

<div class="single">
  <img src="http://via.placeholder.com/150x150">
  <button type="button" class="remove">X1</button>
</div>
<div class="single">
  <img src="http://via.placeholder.com/150x150">
  <button type="button" class="remove">X2</button>
</div>
<div class="single">
  <img src="http://via.placeholder.com/150x150">
  <button type="button" class="remove">X3</button>
</div>
<div class="single">
  <img src="http://via.placeholder.com/150x150">
  <button type="button" class="remove">X4</button>
</div>

- Arun P Johny

Answer 3

如果您使用 ES6 及以上版本，则可以避免使用 currentTarget 来处理点击事件：

const removeButtons = document.getElementsByClassName('remove');

Array.from(removeButtons).forEach((removeButton) => {
  removeButton.addEventListener('click', () => {
    removeButton.parentNode.remove();
  });
});

<div class="single">
  <img src="http://via.placeholder.com/150x150">
  <button type="button" class="remove">X1</button>
</div>
<div class="single">
  <img src="http://via.placeholder.com/150x150">
  <button type="button" class="remove">X2</button>
</div>
<div class="single">
  <img src="http://via.placeholder.com/150x150">
  <button type="button" class="remove">X3</button>
</div>
<div class="single">
  <img src="http://via.placeholder.com/150x150">
  <button type="button" class="remove">X4</button>
</div>

- DAG

Answer 4

this.parentElement.remove也可以工作

- Ibrahim Shah

Answer 5

// Node List of the buttons in your html with class of "remove"
  const removeButtonsNodeList = document.querySelectorAll(".remove"); 

  // No Need to convert node list to an array, you can use use forEach to loop over a nodeList. Just beware it's not an array
  

  // Loop through the list and add an event listener, on click to run a function on each btn (button) in the array. The function removes the parent. But you can inspect the element of your html and you can play with in console if your html chnages to find the correct parent, you may have to get the parent of prarent of parent.
  removeButtonsNodeList.forEach((btn) => {

    btn.addEventListener('click', function(){
      btn.parentElement.remove(); 
    });

  })

<div class="single">
    <img src="http://via.placeholder.com/150x150">
    <button type="button" class="remove">X1 - Delete Me</button>
  </div>
  <br>
  <div class="single">
    <img src="http://via.placeholder.com/150x150">
    <button type="button" class="remove">X2 - Delete Me</button>
  </div>
  <br>
  <div class="single">
    <img src="http://via.placeholder.com/150x150">
    <button type="button" class="remove">X3 - Delete Me</button>
  </div>
  <br>
  <div class="single">
    <img src="http://via.placeholder.com/150x150">
    <button type="button" class="remove">X4 - Delete Me</button>
  </div>

- Elias Glyptis