使用普通 javascript 单击删除父元素

Question

我正在尝试学习我以前在 jQuery 中用普通 JavaScript 做的事情。

我在 inte.net 上找到了要解决的例子，这真的让我很难过。

我试图在单击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()
  })
})

感谢您的任何回答。

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>

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>

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>

Answer 4

this.parentElement.remove 也可以工作

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>