javascript刪除div onclick

Question

純JavaScript，我需要刪除li上點擊span。

• 通過點擊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個父節點？

因爲第一是<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>

這將是最好只定義一個簡單的函數，而不是改變object原型，作爲@Satpal建議的。

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>