Question

我想知道如何删除我点击删除链接的表格行。现在它只删除一行。

<script type="text/javascript">
        $(function() {
            $("#deleteEvent").click(function(e) {
                $("#drow").remove();
                return false;
            });
    </script>

html就在这里

<div id="students">
        <table>
            <caption>Students</caption>
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Student ID</th>
                <th>Email</th>
                <th>Action</th>
            </tr>
            <tr id="drow"><td>John</td><td>Doe</td><td>1234</td><td>john.doe@gmail.com</td><td><a      href="#" id="deleteEvent">Delete</a></td></tr>
            <tr id="drow"><td>Amy</td><td>Adams</td><td>234234</td><td>amy.adams@hotmail.com</td>   <td><a href="#" id="deleteEvent">Delete</a></td></tr>
            <tr id="drow"><td>Megan</td><td>Huffman</td><td>12255</td><td>amy.adams@hotmail.com</td><td><a href="#" id="deleteEvent">Delete</a></td></tr>
        </table>
        <a href="#" class="addRecord">Add Record</a> 
    </div>

Answer 1

您在HTML中重复使用id值，这是无效的。鉴于此，选择那些id的任何内容的行为都是未定义的。例如：

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

它可能会删除第一个#drow，它可能会删除所有这些，它可能会删除所有这些，它可能会抛出错误等等。由于标记无效，行为是未定义的。

因此，您要做的第一件事就是不在HTML中重复使用id值。您显示的HTML可以改为使用class值：

<tr class="drow">

或者，您可能根本不需要id或class ...

如果删除按钮在行内，那么您可以引用相对于使用此单击的按钮的行：

$(this).closest('tr').remove();

这将从调用事件的元素开始，向上遍历DOM，直到找到第一个tr元素，然后删除该元素。

修改：您还在id代码上使用了重复的a：

<a href="#" id="deleteEvent">

您可以使用class：

替换它们

<a href="#" class="deleteEvent">

将选择器更改为：

$(".deleteEvent").click(function(e) {
    // code
});

或者您可以完全删除id或class，因为您仍然可以识别没有它的元素：

$("#students a").click(function(e) {
    // code
});

Answer 2

使用这个

<script type="text/javascript">
        $(function() {
            $("#deleteEvent").click(function(e) {
                $(this).parent('tr').remove();

            });
    </script>

Answer 3

请使用下面给出的功能替换您的功能。它的工作。我检查了一下。

$(function() {
    $("table a").click(function(e) {
        $(this).parent().parent().remove();
        return false;
    });
});

这只会删除表格中的第一行。我想删除我点击使用jQuery＆amp; HTML

3 个答案: