如何正確刪除行？

我的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刪除正確的行正確的方法是什麼？

來源

2017-04-25 Mattia Dinosaur

你的問題是一個完美* *實例的[XY問題]（的https://meta.stackexchange.com/questions/66377/what-is-the-xy-problem ）。您基於您認爲*的方式提出問題是正確的做法，但實際上這並不是實現最終目標的正確方法。 – Jamiec

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

來源

2017-04-25 14:01:26

這是超級錯綜複雜的。你可以剛剛使用'$（「。idName」）.filter（...）' - 但是再一次....這是一個非常簡單的問題的錯誤解決方案。 – Jamiec

@Jamiec，過濾器通過爲每個項目調用一個提供的回調解決方案創建一個新數組。 –

也許OP想要這樣做。這就像同時刪除更多行。 –

什麼是通過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>

來源

2017-04-25 13:52:56 Jamiec

如何正確刪除行？

回答

相關問題