How to delete a dynamic row with JQuery?

Question

I am adding rows with a button that is working now, but I have another button to delete and is not working. This is my code in JS:

jQuery(document).ready(function () {

    var collectionCount = 0;

    jQuery('#add-another-collection').click(function (e) {
        e.preventDefault();

        var collectionList = jQuery('#collection-fields-list');

        var newWidget = collectionList.attr('data-prototype');

        newWidget = newWidget.replace(/__name__/g, collectionCount);
        collectionCount++;


        var newTr = jQuery('<tr></tr>').html(newWidget);
        newTr.appendTo(collectionList);

    });

    $('.remove-collection').click(function (e) {

        console.log('fdsffdsfds');
        e.preventDefault();
        $(this).parent().remove();

        return false;
    });
})

I put a console.log to check if a I am going through there but Not.

This is the button:

<button type="button" class="btn btn-danger remove-collection">Delete</button>

A row of what?? I'm guessing you mean a HTML table? Please create a [Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve) of your problem — Liam, Jan 03 '18 at 16:50
@Liam yes , I am adding rows to a HTML table and the button add is working, but the delete button not — Lucas Leonel Azzollini, Jan 03 '18 at 17:12
@LucasLeonelAzzollini is the `.remove-collection` buttons part of the dynamically added collections ? Or is it a button that exists at the page load ? — Gabriele Petrioli, Jan 03 '18 at 17:29
It is a dynamic button which is added when you click 'add-another-collection' — Lucas Leonel Azzollini, Jan 03 '18 at 17:36
@LucasLeonelAzzollini then have a look at https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements (*a duplicate with detailed explanation*) — Gabriele Petrioli, Jan 03 '18 at 18:41

DNKROZ · Accepted Answer · 2018-01-03T17:40:01.913

0

If your button is added to the DOM dynamically you must use the following click handler:

$(document).on('click', '.remove-collection', function () {

});

edited Jan 03 '18 at 17:40

answered Jan 03 '18 at 16:51

DNKROZ

2,634
4
25
43

I have just edited the answer because I badly copied the code without the '.' – Lucas Leonel Azzollini Jan 03 '18 at 17:09
Don't see the issue then, it hits the click function fine: https://jsfiddle.net/atg5m6ym/8704/ – DNKROZ Jan 03 '18 at 17:34
But, it is a dynamic button which is added when you click 'add-another-collection' – Lucas Leonel Azzollini Jan 03 '18 at 17:38
And it is a collection of button, there are n rows with this button – Lucas Leonel Azzollini Jan 03 '18 at 17:39
You didn't mention it was dynamically added in your original question. See my updated answer – DNKROZ Jan 03 '18 at 17:40
This solved my problem , thanks – Lucas Leonel Azzollini Jan 03 '18 at 17:55
Glad to hear it! – DNKROZ Jan 03 '18 at 17:56

How to delete a dynamic row with JQuery?

1 Answers1