Javascript 这将只删除我的表中的第一行。我希望它删除我使用jQuery&；单击的任何一行；html

我想知道如何删除我在中单击“删除”链接的表行。现在它只删除一行

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

$（函数（）{
$（“#删除事件”）。单击（函数（e）{
$（“#drow”）.remove（）；
返回false；
});

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>

学生
名字
姓
学生证
电子邮件
行动
约翰。doe@gmail.com
艾米。adams@hotmail.com   
MeganHuffman12255amy。adams@hotmail.com

使用此

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

            });
    </script>

$（函数（）{
$（“#删除事件”）。单击（函数（e）{
$（this.parent（'tr'）.remove（）；
});

使用此

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

            });
    </script>

$（函数（）{
$（“#删除事件”）。单击（函数（e）{
$（this.parent（'tr'）.remove（）；
});

您在HTML中使用的是

id

值，这是无效的。因此，任何选择这些

id

s的行为都是未定义的。例如：

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

它可能会删除第一个

#drow

，可能会删除所有，可能不会删除任何一个，可能会引发错误，等等。由于标记无效，因此行为未定义

因此，您首先要做的是不要在HTML中重复使用

id

值。您显示的HTML可以使用

class

值：

<tr class="drow">

这将从调用事件的元素开始，向上遍历DOM，直到找到第一个

tr

元素，然后删除该元素

---

编辑：您还在

a

标签上使用重复的

id

s：

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

并将选择器更改为：

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

或者您可以完全删除

id

或

class

，因为您仍然可以在没有它的情况下识别元素：

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

---

您在HTML中使用的是

id

值，这是无效的。因此，任何选择这些

id

s的行为都是未定义的。例如：

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

它可能会删除第一个

#drow

，可能会删除所有，可能不会删除任何一个，可能会引发错误，等等。由于标记无效，因此行为未定义

因此，您首先要做的是不要在HTML中重复使用

id

值。您显示的HTML可以使用

class

值：

<tr class="drow">

这将从调用事件的元素开始，向上遍历DOM，直到找到第一个

tr

元素，然后删除该元素

---

编辑：您还在

a

标签上使用重复的

id

s：

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

并将选择器更改为：

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

或者您可以完全删除

id

或

class

，因为您仍然可以在没有它的情况下识别元素：

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

---

请用下面给出的函数替换你的函数。它正在工作。我已经检查过了

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

---

请用下面给出的函数替换你的函数。它正在工作。我已经检查过了

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

---

使用重复ID…使用类是错误的。使用重复ID…使用类是错误的。这将删除

a

，而不是

tr

。尝试此操作我已更改添加父项以删除tr@HarutyunAbgaryan：我非常肯定

.parent（）

只遍历DOM中的一个级别，因此这将删除

td

，而不是

tr

。这将删除

a

，而不是

tr

。尝试此操作我已更改添加父级以删除tr@HarutyunAbgaryan：我非常肯定

.parent（）

只遍历DOM中的一个级别，因此这将删除

td

，而不是

tr

。这仍然只删除表中的第一个级别，然后不允许删除anymore@Tator：您是否仍在使用重复的

id

s？例如，在

a

标记上：

id=“deleteEvent”

Duplicate

id

s无效，因此行为未定义。如何使用不同的？@nevermind:jsFiddle似乎正在工作。但请记住，您仍然根本不需要

类

es。您可以在没有它们的情况下识别目标元素，因此删除它们会使标记更清晰一些。：）在更新之前，当OP询问如何使用课堂时，我发布了fiddle…然而，在这种情况下，学生a和最近的（'tr'）就足够了…所以，我想我可以删除我的评论。。）这仍然只删除表中的第一个，然后不允许我删除anymore@Tator：您是否仍在使用重复的

id

s？例如，在

a

标记上：

id=“deleteEvent”

Duplicate

id

s无效，因此行为未定义。如何使用不同的？@nevermind:jsFiddle似乎正在工作。但请记住，您仍然根本不需要

类

es。您可以在没有它们的情况下识别目标元素，因此删除它们会使标记更清晰一些。：）在更新之前，当OP询问如何使用课堂时，我发布了fiddle…然而，在这种情况下，学生a和最近的（'tr'）就足够了…所以，我想我可以删除我的评论。。）