每次在 jQuery 中单击按钮（子项）时，如何删除选定的 <tr>（父项）div？

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 有问题，但我很难弄清楚如何让按钮在我想删除的所有 tr 上工作，而不创建唯一的 id 和冗余 jQuery代码。

感谢任何帮助！

Answer 1

ID必须是唯一的！

更改或删除 HTML

中的 ID 属性

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

并改用 .class 属性

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

顺便说一下，您应该使用 .closest()

而不是 .parent().parent()

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

get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.

jQuery Closest documentation

Answer 2

ID 不能在页面中重复，它们根据定义是唯一的。

您需要将其改为 class

Answer 3

您正在使用 ID，对于多个按钮，您应该使用 CLASS 名称。所以你最好将 btn-del-rev 转换为 class.

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设为class

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

使用class，然后获取最近的行

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

每次在 jQuery 中单击按钮（子项）时，如何删除选定的 <tr>（父项）div？

How can I delete selected <tr>(parent) div every time a button (child) is clicked in jQuery?

html

javascript

jquery

parent

parent-child