Question

我有以下HTML代码：

<table class="table" id="restricted_component_data">
  <tbody>
    <tr>
      <th></th>
      <th>Component ID</th>
    </tr>  
    <tr data-component-id="15">
      <td>
        <span class="remove_restriction" data-component-id="15">X</span>
      </td>
      <td>link_component_restriction</td>
    </tr>
    <tr data-component-id="12">
      <td>
        <span class="remove_restriction" data-component-id="12">X</span>
      </td>
      <td>link_component_restriction 12</td>
    </tr>
    <tr data-component-id="11">
      <td>
        <span class="remove_restriction" data-component-id="11">X</span>
      </td>
      <td>link_component_restriction 11</td>
    </tr>
  </tbody>
</table>

我试图通过tr attr删除data-component-id元素。所以这就是我在做的事情：

$(function() {
  $('#restricted_component_data').on('click', '.remove_restriction', function(ev) {
    ev.preventDefault();
    var component_id = $(this).data('component-id');

    $('#restricted_component_data').find('tr [data-component-id="' + component_id + '"]').remove();
  });
});

但是我的代码没有工作，因为它只删除了列而不是行（在小提琴上试试）。我在这里遗漏了一些东西，但我不确定它是什么。

可以帮助找出为什么这不起作用？

可以使用小提琴here。

Answer 1

你也可以这样做：

$(this).closest("tr").remove()

你不需要任何组件ID。

Answer 2

在＆＃34; tr＆＃34;之后删除空格。在选择器中，即

'tr [data-component-id="

为：

'tr[data-component-id="

小提琴：https://jsfiddle.net/e0hy5m7s/1/

Answer 3

如果可能，我会通过遍历as shown in Sachin's answer来完成。

如果由于某种原因你不能这样做：

你所拥有的不起作用的原因是你只匹配td，而不是tr，因为你的选择器适用于 in 的元素（后代）tr。

而不是

$('#restricted_component_data').find('tr [data-component-id="' + component_id + '"]').remove();

你想要

$('#restricted_component_data').find('tr:has([data-component-id="' + component_id + '"])').remove(); // -------------------------------------^^^^^------------------------------------------^

或

$('#restricted_component_data').find('tr [data-component-id="' + component_id + '"]').closest('tr').remove(); // ----------------------------------------------------------------------------------^^^^^^^^^^^^^^

或Eun points out in a comment，因为tr以及td上的数据属性相同，您可以使用原始代码但{{1}之后的空格删除：

tr

Answer 4

将find(tr [data-....中的空间移至find(tr[data-....

Answer 5

使用此fiddle

JS：

$(function() {
  $(document).on('click', '.remove_restriction', function(ev) {
    ev.preventDefault();
    var component_id = $(this).data('component-id');

    alert(component_id);

    $(this).closest('tr[data-component-id="' + component_id + '"]').remove();
  });
});

通过其data- * attr删除行不起作用，为什么？

5 个答案: