普通のjavascriptでクリックすると親要素を削除します

Question

jQueryでやっていたことをプレーンJavaScriptで学ぶことを試みています。

私は解決するためにインターネット上で見つけた例があり、本当に苦労しました。

button.removeをクリックして、親div.singleを削除しようとしています。

ここにコードがあります。

var btn = document.getElementsByClassName('remove') 
 
    
 
for (var i = 0; i < btn.length; i++) { 
 
    btn[i].addEventListener('click',function (e) {  
 
     e.parentNode.parentNode.removeChild(e.parentNode); 
 
    } , false); 
 
}

<div class="single"> 
 
    <img src="http://via.placeholder.com/150x150"> 
 
    <button type="button" class="remove">X1</button> 
 
    </div> 
 
    <div class="single"> 
 
    <img src="http://via.placeholder.com/150x150"> 
 
    <button type="button" class="remove">X2</button> 
 
    </div> 
 
    <div class="single"> 
 
    <img src="http://via.placeholder.com/150x150"> 
 
    <button type="button" class="remove">X3</button> 
 
    </div> 
 
    <div class="single"> 
 
    <img src="http://via.placeholder.com/150x150"> 
 
    <button type="button" class="remove">X4</button> 
 
    </div>

私はエラーe.parentNode is undefinedを取得しています。

私は後に同じことをするjQueryコードです。

$(document).ready(function() { 
    $(document).on('click', '.remove', function() {  
    $(this).parent('.single').remove() 
    }) 
}) 

ありがとうございました。

Answer 1

あなたは

注（currentTarget/target）イベント・オブジェクトから要素の参照を取得する必要があります：すべての近代的なブラウザのはNode.remove()

var btn = document.getElementsByClassName('remove') 
 

 
for (var i = 0; i < btn.length; i++) { 
 
    btn[i].addEventListener('click', function(e) { 
 
    e.currentTarget.parentNode.remove(); 
 
    //this.closest('.single').remove() // in modern browsers in complex dom structure 
 
    //this.parentNode.remove(); //this refers to the current target element 
 
    //e.target.parentNode.parentNode.removeChild(e.target.parentNode); 
 
    }, false); 
 
}

<div class="single"> 
 
    <img src="http://via.placeholder.com/150x150"> 
 
    <button type="button" class="remove">X1</button> 
 
</div> 
 
<div class="single"> 
 
    <img src="http://via.placeholder.com/150x150"> 
 
    <button type="button" class="remove">X2</button> 
 
</div> 
 
<div class="single"> 
 
    <img src="http://via.placeholder.com/150x150"> 
 
    <button type="button" class="remove">X3</button> 
 
</div> 
 
<div class="single"> 
 
    <img src="http://via.placeholder.com/150x150"> 
 
    <button type="button" class="remove">X4</button> 
 
</div>