如何刪除所選內容 <tr> （父級）div每次在jQuery中單擊按鈕（子級）時？

Question

HTML：

<tr>
    <td>
        <div class="input">
            <p>Room 1: </p>
        </div>  
    </td>
    <td>
        <div class="revenue-input">
            <input type="number" min="0" id="room1rev" size="1" placeholder="0">
        </div>
    </td>
    <td>
        <button id="btn-del-rev" class="btn-del">-</button>
    </td>
</tr>
<tr>
    <td>
        <div class="input">
            <p>Room 2: </p>
        </div>  
    </td>
    <td >
        <div class="revenue-input">
            <input type="number" min="0" id="room2rev" size="1" placeholder="0">
        </div>
    </td>
    <td>
        <button id="btn-del-rev" class="btn-del">-</button>
    </td>
</tr>

jQuery的：

<!-- Delete Element -->
<script>
$(document).ready(function() {
  $("#btn-del-rev").click(function() {
    $(this).parent().parent().remove()
    });
});
</script>

單擊具有＃btn-del-rev id的按鈕時，它將刪除整個tr結構（父級等）。但是，單擊下一行上的相同按鈕不會刪除下一個tr。

我知道重用id是個問題，但是我很難弄清楚如何在不創建唯一id和冗余jQuery代碼的情況下讓按鈕在我想刪除的所有tr上正常工作。

任何幫助表示贊賞！

Answer 1

ID必須是唯一的！

更改或刪除HTML中的ID屬性

<button class="btn-del">-</button>

並改用.class屬性

$(".btn-del").click(function() {

順便說一句，您應該使用.closest()代替.parent().parent() .closest()

$(this).closest('tr').remove()

通過測試元素本身並在DOM樹中遍歷其祖先，獲得與選擇器匹配的第一個元素。

jQuery最近文檔

Answer 2

ID不能在頁面中重復，根據定義它們是唯一的。

您需要將其更改為一個類

Answer 3

您正在使用ID，對於多個按鈕，您應該使用CLASS名稱。 因此，您最好將btn-del-rev為一個類。

Answer 4

這些ID必須是唯一的，因此您可以將其更改為class。

為了僅刪除父div，您需要更改以下行：

$(this).parent().parent().remove()

至：

$(this).closest('tr').find('div.revenue-input').remove()

.closest（'tr'）選擇父行，而find選擇div。

片段：

 $(document).ready(function () { $(".btn-del-rev").click(function () { $(this).closest('tr').find('div.revenue-input').remove() }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tbody> <tr> <td> <div class="input"> <p>Room 1: </p> </div> </td> <td> <div class="revenue-input"> <input type="number" min="0" id="room1rev" size="1" placeholder="0"> </div> </td> <td> <button class="btn-del-rev btn-del">-</button> </td> </tr> <tr> <td> <div class="input"> <p>Room 2: </p> </div> </td> <td> <div class="revenue-input"> <input type="number" min="0" id="room2rev" size="1" placeholder="0"> </div> </td> <td> <button class="btn-del-rev btn-del">-</button> </td> </tr> </tbody> </table> 

Answer 5

將ID設為班級

 <button class="btn-del-rev btn-del">-</button>  

使用該類，然后獲得最接近的行

$(document).ready(function() {
  $(".btn-del-rev").on('click',function() {
    $(this).closest("tr").remove();
  });
});