如何删除 td 具有特定数据属性值的 tr

Question

我试图在ajax成功后从DOM中删除一个

tr

，其中这个

td

的

tr

具有特定的

data-value

值

这是 html:

<tr>
    <td data-value="1">First</td>
</tr>
<tr>
    <td data-value="2">Second</td>
</tr>
<tr>
    <td data-value="3">Third</td>
</tr>
......

我的ajax javascript:

success: function (data) {          
            var identity = data.val; // gives me the number 2
            // find td which has data-value of 2 and remove the corresponding tr of it from DOM 
            $('td[data-value=identity]').closest('tr').remove(); // does not work       
        },

我怎样才能实现这个目标？

Answer 1

我建议您非常具体地了解带有“td”标签的表格。

$('td[data-value="'+ identity +'"]').closest('tr').remove(); 评论中回答的上述代码仅适合您：

如果 HTML DOM 中有单个表，其中“tr”标签作为“td”标签的父元素，其上有 data-value=“identity”。
如果 HTML DOM 上有多个表，此代码将从 DOM 内的开始/第一个“元素”开始检查，一旦找到具有 data-value='identity' 属性的“td”标签，它将删除父“tr”元素，无论 DOM 内可能有多个表，或者您希望从表 2 中删除“tr”标签，但它按照上面的代码从表 1 中删除了“tr”标签。

如果您想定位表内的任何标签（因为在未来的开发中同一页面上可能有多个表），在 jQuery 选择器中指定表名称并根据要求将其遍历到特定的子元素始终是一个很好的做法).

您可以将上面的代码即兴编写为，

$('#specific-table-name tbody td[data-value="'+ identity +'"]').closest('tr').remove();

此代码将首先在整个 DOM 中查找表名称，然后遍历该表的“tbody”标签并搜索具有 data-value="identity" 的“td”元素 -> 然后删除最近的“tr”。

注意：如果要删除多个 data-value="identity"，请使用 .each/.map 方法迭代表以获得所需结果。