How can I delete selected (parent) div every time a button (child) is clicked in 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>

When the button with the #btn-del-rev id is clicked it removes the entire tr structure (parent, etc.) However, clicking the same button on the next row doesn't remove the next tr.

I understand that it's a problem with reusing an id, but I'm having a hard time figuring out how to have the button work across all tr that I want deleted without creating a unique id, and redundant jQuery code.

Any help is appreciated!

Possible duplicate of [Html duplicated "id"](http://stackoverflow.com/questions/22059438/html-duplicated-id) — nbrooks, Oct 03 '16 at 22:18

score 5 · Accepted Answer · answered Oct 03 '16 at 22:09

An ID must be unique !

Change or remove the ID attribute in your HTML

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

And use the .class attribute instead

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

By the way, instead of .parent().parent(), you should use .closest()

$(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

Exactly what I needed to change. Thank you! – lookininward Oct 03 '16 at 22:43 — lookininward, Oct 03 '16 at 22:43

score 1 · Answer 2 · answered Oct 03 '16 at 22:10

1

ID's can't be repeated in a page, they are unique by definition.

You need to change that to a class instead

answered Oct 03 '16 at 22:10

charlietfl

170,828
13
121
150

score 0 · Answer 3 · answered Oct 03 '16 at 22:10

0

You're using IDs and for multiple buttons you should use CLASS names. So you better transform that btn-del-rev to a class.

answered Oct 03 '16 at 22:10

Tiberiu Petcu

822
7
10

score 0 · Answer 4 · answered Oct 03 '16 at 22:13

The IDs must be unique, so you may change them to class.

In order to remove only the parent div you need to change this line:

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

to:

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

The .closest('tr') selects the parent row, while the find selects the div.

The snippet:

$(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>

score 0 · Answer 5 · answered Oct 03 '16 at 22:14

0

Make the id a class

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

Use the class, then get closest row

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

answered Oct 03 '16 at 22:14

Mark Schultheiss

32,614
12
69
100

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

5 Answers5