主页 / 问题 / 1063658
Accepted
Мирас Текесбаев
Asked:2020-12-27 16:12:38 +0000 UTC2020-12-27 16:12:38 +0000 UTC

如何使用 event.target 通过最近的删除 tr？

  • 772

大家好！请告诉我，如何tr通过单击图标来实现删除行fa-trash。这是 DOM，下面我将描述我的脚本。

在此处输入图像描述

这是脚本本身：

var table = document.querySelector('.table');
table.addEventListener('click', checkAct);

function checkAct(event) {
  var target = event.target;
  if (target.tagName === 'TD' && target.className !== 'delete') {
    editTd(target);
  } else if (target.tagName === 'TD' && target.className === 'delete') {
    deleteTr(target);
  }
}

function deleteTr(target) {
  var tr = target.closest('tr');
  if (tr) {
    tr.parentNode.removeChild(tr);
  }
}
<table class="table">
  <tr>
    <th>Имя</th>
    <th>Фамилия</th>
    <th>Удалить</th>
  </tr>
  <tr>
    <td>Иван</td>
    <td>Васильевич</td>
    <td class="delete"><a href="#"><i class="fa fa-trash"></i></a></td>
  </tr>
  <tr>
    <td>Влад</td>
    <td>Анатольевич</td>
    <td class="delete"><a href="#"><i class="fa fa-trash"></i></a></td>
  </tr>
</table>

<form action="" id="form">
  <input type="text" name="" class="name" placeholder="Введите имя">
  <input type="text" name="" class="surname" placeholder="Введите фамилию">
  <button type="submit" class="btn">Добавить строку</button>
</form>

当我点击td-shki 区域时，该行tr被删除，当我点击图标fa-trash时，脚本不起作用，我知道target函数参数中的 -th有错误deleteTr，但我无法辨认可以做什么。

帮助如何实现这个脚本，并确保使用closest. 如果你能更详细地解释一下，我求你了。

javascript

1 个回答

  1. Best Answer

    这里 ：

    document.querySelector('table').addEventListener('click', e => {
  if (e.target.matches('.fa.fa-trash'))
    e.target.closest('tr').remove()
})

// или так
// document.querySelector('table').addEventListener('click', e =>
//       e.target.matches('.fa.fa-trash') ? e.target.closest('tr').remove() : {})
    <table class="table">
  <tr>
    <th>Имя</th>
    <th>Фамилия</th>
    <th>Удалить</th>
  </tr>
  <tr>
    <td>Иван</td>
    <td>Васильевич</td>
    <td class="delete"><a href="#"><i class="fa fa-trash">remove</i></a></td>
  </tr>
  <tr>
    <td>Влад</td>
    <td>Анатольевич</td>
    <td class="delete"><a href="#"><i class="fa fa-trash">remove</i></a></td>
  </tr>
</table>

    逻辑非常简单，监控对表格的点击，我们检查是否点击了所需的图标，如果是，则删除该行

    火柴

    • 1

相关问题