如何正確刪除行？

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>