如何正确删除行？

Question

我的jQuery代码：

//i can get the id correctly 
    id = $(this).parent().parent().children('td.idName').text(); 

//it seems that i have invoke the wrong function 
$('.confirmDeleteButton').click(function() { 
     $(".idName:contains('" +id + "')").parent().remove(); 
}); 

我有一个表有许多行，当我点击confirmDeleteButton，应该删除该行。
例如如果ID = 1
这意味着我应该删除此行

<tr> 
    <td class="idName">1</td> //id =1; 
    <td><button class="delete " > delete</td> 
</tr> 

但事实上，它delect

<tr> 
    <td class="idName">1</td> //id = 1 
    <td><button class="delete " > delete</td> 
</tr> 
<tr> 
    <td class="idName">10</td> //id =10 
    <td><button class="delete ">delete</td> 
</tr> 

看来，如果ID = 1它将删除所有行与如11,111，101,21等

我的问题是什么是ID删除正确的行正确的方法是什么？

Answer 1

使用contains方法这是一个错误的事情。您可以使用接受callback方法的forEach方法。

var id=1; 
 
$('.confirmDeleteButton').click(function() { 
 
     Array.from($(".idName")).forEach(function(item){ 
 
     if($(item).text().trim()=="1") 
 
      $(item).parent().remove(); 
 
     }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<table> 
 
<tr> 
 
    <td class="idName">1</td> 
 
    <td><button class="delete"> delete</td> 
 
</tr> 
 
<tr> 
 
    <td class="idName">1</td> 
 
    <td><button class="delete"> delete</td> 
 
</tr> 
 
<tr> 
 
    <td class="idName">10</td> 
 
    <td><button class="delete">delete</td> 
 
</tr> 
 
</table> 
 
<button class="confirmDeleteButton">Confirm</button>

Answer 2

什么是通过ID删除正确的行的正确方法？

不这样做，请删除相对于您点击的按钮的行。

$('.delete').on('click',function(){ 
 
    $(this).parents("tr").remove(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
<tr> 
 
    <td class="idName">1</td> 
 
    <td><button class="delete" > delete</td> 
 
</tr> 
 
<tr> 
 
    <td class="idName">10</td> 
 
    <td><button class="delete">delete</td> 
 
</tr> 
 
</table>