javascript divを削除する

Question

を純粋なjavascriptで削除するには、をクリックして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を汚染しないでください。すべてのオブジェクトでこの関数は必要ありません。別の関数を作成し、removeChild()ではなく、remove()を使用します。

ChildNode.remove（）メソッドは、そのオブジェクトが属するツリーからオブジェクトを削除します。

ただし、すべてのブラウザで削除は機能しません。これは新しい機能です。だから私はあなたに2つの解決策を提案する。 removeChild()で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>

で

。

なぜ2つのparentNodesですか？

に最初は<span>ですが、あなたが "削除" オプションが含まれてい< LI>要素を削除したい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

を必要としているので？ そうなら、それはそれを行う方法です。

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>