使用 addEventListener 删除 table 中的整行的错误

Question

我需要通过单击带有标签（删除）的单元格来删除 table 中的整行，它有效，但如果我单击任何其他单元格，该行也会被删除。下面是 HTML 和 JS 代码来演示使用事件冒泡方法：

var table1 = document.querySelector("#tableOne");

table1.addEventListener("click", function(event) {
  event.preventDefault();
  event.target.parentNode.parentNode.remove();
});

<html>
<head></head>
<body>
   <table>
          <thead>
            <tr class="product">
              <td></td>
              <td>Name</td>
              <td>Amount</td>
              <td>Price</td>
              <td>Total</td>
              <td><a href="" class="removeItem">(remove)</a></td>
            </tr>
          </thead>
          <tbody id="tableOne">
            <tr class="product">
              <td><img src="imagens/tablet.jpg"></td>
              <td>Tablet miPad 18</td>
              <td>1</td>
              <td>499.99</td>
              <td class="item-total">499.99</td>
              <td><a href="" class="removeItem">(remove)</a></td>
            </tr>
            <tr class="product">
              <td><img src="imagens/phone.png"></td>
              <td>Telephone miPhone 18</td>
              <td>2</td>
              <td>199.99</td>
              <td class="item-total">399.98</td>
              <td><a href="" class="removeItem">(remove)</a></td>
            </tr>
            <tr class="product">
              <td><img src="imagens/shoe.jpg"></td>
              <td>Shoe</td>
              <td>1</td>
              <td>99.99</td>
              <td class="item-total">99.99</td>
              <td><a href="" class="removeItem">(remove)</a></td>
            </tr>
           </tbody>
          </table>
         </body>
        </html>

预期的结果是仅当我单击（删除）时才删除该行如果我可以通过某种方式为每个 .removeItem 添加一个 EventListener，那就太好了。谢谢大家，复活节快乐！

Answer 1

您可以将事件过滤为仅目标为 removeItem link:

的事件

var table1 = document.getElementById('tableOne');

table1.addEventListener('click', function (event) {
  if (!event.target.classList.contains('removeItem')) {
    return;
  }

  event.target.parentNode.parentNode.remove();
  event.preventDefault();
});

但请记住，只有当 link 被点击时保证是目标时才有效，即当 link 没有元素子元素时。考虑到这个问题和 jQuery（是的，我知道），这更可靠：

$("#tableOne").on('click', ".removeItem", function (e) {
  $(this).closest(".product").remove();
  e.preventDefault();
});

如果 table 没有动态添加行，您可以为每个行添加事件侦听器（有疑问，但方便）：

var removeLinks = document.getElementsByClassName('removeItem');

for (var i = 0; i < removeLinks.length; i++) {
  removeLinks[i].addEventListener('click', function (e) {
    this.parentNode.parentNode.remove();
    e.preventDefault();
  });
}

而且还可以带来 jQuery 便利：

function closest(className, element) {
  while (element && element.nodeType === 1) {
    if (element.classList.contains(className)) {
      return element;
    }
  }

  return null;
}

var table1 = document.getElementById('tableOne');

table1.addEventListener('click', function (e) {
  var link = closest('removeItem', e.target);
  var row = closest('product', link);

  if (!link) {
    return;
  }

  row.remove();
  e.preventDefault();
});

使用 addEventListener 删除 table 中的整行的错误

bug removing an entire row in a table using addEventListener

javascript

addeventlistener

event-bubbling