Question

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

＆＃13;

var table1 = document.querySelector("#tableOne");

table1.addEventListener("click", function(event) {
  event.preventDefault();
  event.target.parentNode.parentNode.remove();
});

＆＃13;

<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>

＆＃13;

预期的结果是只有在我点击（删除）时才删除该行如果我可以通过某种方式将EventListener添加到每个.removeItem会很棒。谢谢大家和复活节快乐！

Answer 1

您可以仅将事件过滤到目标为removeItem链接的事件：

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

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

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

但请记住，只有在链接被点击时，即链接没有元素子元素时才能保证链接有效。鉴于这个问题和jQuery（是的，我知道），这更可靠：

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

如果表没有动态添加行，那么可以向每个人添加事件监听器（有问题，但方便）：

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删除表中的整行

1 个答案: