javascript - 这只会删除我表中的第一行。我希望它使用 jQuery 和 html 删除我点击的任何一行

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 元素，然后删除该元素。

<小时/>

编辑:您还在 a 标记上使用了重复的 id:

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

您可以将它们替换为类:

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

并将选择器更改为:

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

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

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