Question

我有这段代码：

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

然后我有这个功能：

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

这将在浏览器中显示如下：

<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')) {

我该如何解决这个问题？

注意：

这是整个部分：

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

这种情况正在发生，因为当您将删除按钮包装在div中时，单击的目标将成为包装div。它只有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();
})

当按钮类被其他类包装时，Javascript代码不起作用

1 个答案: