小编loo*_*ard的帖子

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代码.

任何帮助表示赞赏!