javascript删除div onclick

Question

使用纯JavaScript，我需要在单击span上删除一个li 。

• 通过单击remove我要删除其div。

 Object.prototype.remove = function(){ this.parentNode.removeChild(this); }; var lis = document.querySelectorAll('li'); var button = document.querySelectorAll('span'); for (var i = 0, len = lis.length; i < len; i++) { button[i].addEventListener('click', remove, false); } 

 <ul> <li>List item one<span> remove</span></li> <li>List item two<span> remove</span></li> <li>List item three<span> remove</span></li> <li>List item four<span> remove</span></li> <li>List item five<span> remove</span></li> <li>List item six<span> remove</span></li> </ul> 

Answer 1

不要污染Object 。 您不需要在每个对象中都使用此功能。 创建一个单独的函数并使用remove() ，而不要使用removeChild() 。

ChildNode.remove（）方法从其所属的树中删除该对象。

但是删除并不是在所有浏览器中都起作用。 这是一个新功能。 所以我建议您两个解决方案。

使用remove()

 var remove = function(){ this.parentNode.remove(); }; var lis = document.querySelectorAll('li'); var button = document.querySelectorAll('span'); for (var i = 0, len = lis.length; i < len; i++) { button[i].addEventListener('click', remove, false); } 

 <ul> <li>List item one<span> remove</span></li> <li>List item two<span> remove</span></li> <li>List item three<span> remove</span></li> <li>List item four<span> remove</span></li> <li>List item five<span> remove</span></li> <li>List item six<span> remove</span></li> </ul> 

使用removeChild() 。

为什么要有2个parentNode？

因为第一个是<span> ，但是您需要li

 function remove() { this.parentNode.parentNode.removeChild(this.parentNode); } var lis = document.querySelectorAll('li'); var button = document.querySelectorAll('span'); for (var i = 0, len = lis.length; i < len; i++) { button[i].addEventListener('click', remove, false); } 

 <ul> <li>List item one<span> remove</span></li> <li>List item two<span> remove</span></li> <li>List item three<span> remove</span></li> <li>List item four<span> remove</span></li> <li>List item five<span> remove</span></li> <li>List item six<span> remove</span></li> </ul> 

Answer 2

尝试以下解决方案。

 Object.prototype.remove = function(){ this.parentNode.parentNode.removeChild(this.parentNode); }; var lis = document.querySelectorAll('li'); var button = document.querySelectorAll('span'); for (var i = 0, len = lis.length; i < len; i++) { button[i].addEventListener('click', remove, false); } 

 <ul> <li>List item one<span> remove</span></li> <li>List item two<span> remove</span></li> <li>List item three<span> remove</span></li> <li>List item four<span> remove</span></li> <li>List item five<span> remove</span></li> <li>List item six<span> remove</span></li> </ul> 

最好只定义一个简单函数，而不要像@Satpal建议的那样更改object原型。

 function remove() { this.parentNode.parentNode.removeChild(this.parentNode); } var lis = document.querySelectorAll('li'); var button = document.querySelectorAll('span'); for (var i = 0, len = lis.length; i < len; i++) { button[i].addEventListener('click', remove, false); } 

 <ul> <li>List item one<span> remove</span></li> <li>List item two<span> remove</span></li> <li>List item three<span> remove</span></li> <li>List item four<span> remove</span></li> <li>List item five<span> remove</span></li> <li>List item six<span> remove</span></li> </ul> 

Answer 3

您要删除包含“删除”选项的<li>元素吗？ 如果是这样，那就是这样做的方法。

 Object.prototype.remove = function(){ this.parentNode.parentNode.removeChild(this.parentNode); }; var lis = document.querySelectorAll('li'); var button = document.querySelectorAll('span'); for (var i = 0, len = lis.length; i < len; i++) { button[i].addEventListener('click', remove, false); } 

 <ul> <li>List item one<span> remove</span></li> <li>List item two<span> remove</span></li> <li>List item three<span> remove</span></li> <li>List item four<span> remove</span></li> <li>List item five<span> remove</span></li> <li>List item six<span> remove</span></li> </ul>