Javascript entfernen div onclick

Question

mit reinem Javascript, muss ich eine li auf den span entfernen.

• Durch Klicken auf remove möchte ich seine div entfernen.

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

Sie Object nicht verschmutzen. Sie benötigen diese Funktion nicht in jedem Objekt. Erstellen Sie eine separate Funktion und verwenden Sie remove(), nicht .

Die ChildNode.remove() -Methode entfernt das Objekt aus der Struktur, zu der es gehört.

Aber entfernen funktioniert nicht in jedem Browser. Es ist eine neue Funktion. Also schlage ich Ihnen zwei Lösungen vor.

Mit 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>

Mit removeChild().

Warum 2 parentNodes?

Da die erste ist die <span>, aber Sie müssen 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

Versuchen Sie folgende Lösung.

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>

Es wäre besser, nur eine einfache Funktion zu definieren, anstatt den object Prototyp zu ändern, wie @Satpal vorgeschlagen.

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

Sie wollen die < li> Element entfernen, die die Option "Entfernen" enthält? Wenn ja, so machen Sie es.

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>