Javascriptのコードは、ボタンクラスが他のクラスでラップされたときに動作していない

Question

私はこのコードを持って

<ul> 
<li id="1495488881973"> 
<div class="title">some title</div> 
<div class="comment">some comment</div> 
<div class="delete">Delete</div> 
</li> 
</ul> 

この機能はそのまま残しておけば、削除ボタンをクリックするとクリックされたコメントのみが削除されますそれはすべきだ。

私が抱えている問題は、削除ボタンをラップする他のdivを追加すると、削除ボタンが削除されるということです。例えば

...私はこれを行う場合：今

function commentTemplate({title, comment}) { 
    return ` 
    <div class="panel"> 
    <div class="title">${title}</div> 
    <div class="comment">${comment}</div> 
    <button class="delete">Delete</button> 
    </div> 
    ` 
}; 

を、私はそれがすべてのレコードではなくワンクリックそれが必要のように削除し、削除ボタンをクリックします。

この行のためですか？

if (e.target.classList.contains('delete')) { 

どうすればこの問題を解決できますか？あなたはdivの中にあなたの削除ボタンをラップするとき、あなたのクリックのターゲットはラッピングdiv要素となりますので

comments.addEventListener('click', (e) => { 

    var reviewNode = e.target.parentNode 

    if (e.target.classList.contains('delete')) { 
    var id = reviewNode.id; 
    db.ref('comments/' + id).remove(); 
    } 


}); 

Answer 1

これが起こっている：

注：

これは全体のセクションです。そしてそれはpanelクラスだけを持っています。

それはjQueryを使っていることを解決するために非常に簡単です：

if (e.target.classList.contains('delete')) { 
    var id = reviewNode.id; 
    db.ref('comments/' + id).remove(); 
} 

はどのようにボタンにイベントハンドラをアタッチしている

$(".delete").on("click", function(){ 
    var id = reviewNode.id; 
    db.ref('comments/' + id).remove(); 
})