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

时间:2015-03-16 08:43:53

标签: javascript html

我有下表。
    <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'删除行。 有没有最好的方法来使用JavaScript。

3 个答案:

答案 0 :(得分:3)

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

&#13;
&#13;
document.getElementById("dog4").parentNode.remove();
&#13;
<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>
&#13;
&#13;
&#13;

这将删除包含<tr>的孩子的整个id=dog4

JSfiddle mirror

答案 1 :(得分:1)

您可以尝试使用jquery函数。

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

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

从DOM中删除匹配元素集。

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

答案 2 :(得分:0)

您可以使用.remove() jQuery方法,如下所示: -

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

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

$("table tr td#ID").empty();
  • empty()将删除所有内容。
  • remove()将删除选择及其内容。