使用 for 循环基于 <td> id 从表中删除行

Removing a row from table based on the <td> id using for loop

本文关键字：id 删除行 td for 使用 循环      更新时间：2023-09-26

我有下表。
<table> <tr> <td id="cat1"> cat </td> <td id="dog1"> dog </td> <td id="hen1">hen </td> </tr> <tr> <td id="cat2"> cat </td> <td id="dog2"> dog </td> <td id="hen2">hen </td> </tr> <tr> <td id="cat3"> cat </td> <td id="dog3"> dog </td> <td id="hen3">hen </td> </tr> <tr> <td id="cat4"> cat </td> <td id="dog4"> dog </td> <td id="hen4">hen </td> </tr> </table>

我需要从上表中删除基于标签"ID"的行。有没有最好的方法，tp使用JavaScript来做到这一点。

您可以使用 vanilla javascript 并删除<td>的父节点。例如;

document.getElementById("dog4").parentNode.remove();
<table>
    <tr>
        <td id="cat1"> cat </td>
        <td id="dog1"> dog </td>
        <td id="hen1">hen </td>
    </tr>
    <tr>
        <td id="cat2"> cat </td>
        <td id="dog2"> dog </td>
        <td id="hen2">hen </td>
    </tr>
    <tr>
        <td id="cat3"> cat </td>
        <td id="dog3"> dog </td>
        <td id="hen3">hen </td>
    </tr>
    <tr>
        <td id="cat4"> cat </td>
        <td id="dog4"> dog </td>
        <td id="hen4">hen </td>
    </tr>
</table>

这将删除具有id=dog4的孩子的整个<tr>。

JSfiddle mirror

你可以试试jquery函数。

从 DOM 中删除匹配元素集的所有子节点。

$("#ID").empty();

或

从 DOM 中删除匹配的元素集。

$("#ID").remove();
您可以使用

.remove() jQuery方法，如下所示：-

$("table tr td#ID").remove();

或者您可以使用.empty()方法，如下所示：-

$("table tr td#ID").empty();
  • empty()将删除所选内容的所有内容。
  • remove()将删除所选内容及其内容。
相关文章：