如何删除所选内容 <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();
  });
});