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>

但事实上，它取而代之的是

<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 ，它会删除 1 的所有行，例如 11,111,101,21等。 < / p>

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

Answer 1

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

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

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

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>

如何正确删除行？

2 个答案: