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>