JQuery append on click of a button

Question

I have a form which does a small calculation and display data in table rows. I have also added a button to remove each row at the end. But when I do the calculation couple of times the button gets duplicated. Please refer to the image below.

Image

JS Fiddle

Following is how I append the button

    $(document).ready(function () {
    $('#calculate').click(function () {
    var removeBtn = $('<button class="removeBtn" id="removeBtn">Remove</button>');
                    $('.row-time').append(removeBtn);

        });
    });

I don't understand why the button gets duplicated everytime I add a new row.

You don't specify the specific row to add the button to so its adding it to all rows because you use a class as selector i.e. a group of rows — Master Yoda
– Master Yoda, Commented Feb 7, 2018 at 11:12
@ Reopen Reviewers - The duplicate target question, which is by the same author, has been deleted. — robinCTS
– robinCTS, Commented Mar 12, 2018 at 0:14

4b0 · Accepted Answer · 2018-02-07 11:15:36Z

2

Use last for last class.

$('.row-time:last').append(removeBtn);

Working Fiddle

answered Feb 7, 2018 at 11:15

4b0

22.4k30 gold badges97 silver badges143 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

JQuery append on click of a button

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related