Removing dynamically created divs with jquery

EDIT: Just so I asks questions better next time. I got a -1 what did I do wrong?

I'm adding quite a lot of html dynamically and want to be able to remove them also one by one.

Below the JQuery. I want to be able to remove the whole $("#row1' + (counter) + '") div including all divs in it by clicking the remove button under it.

Here's a fiddle: http://jsfiddle.net/FullContCoder/Sf9r5/1/

Thanks a lot in advance!

$(document).ready(function() {

    var counter = 0;

    $(".addButton").click(function() {

    var test =    $( '<div id="row1' + (counter) + '" class="row"><div class="col-md-2"><p><small>Placement Name:</small></p><input id="inputPlacement' + (counter) + '" type="text" class="form-control input-sm" name="placementName" placeholder="ex: Homepage">' +
            '</div><div class="col-md-3"><p><small>URL:</small></p><input id="inputURL" type="url" class="form-control input-sm" name="url" placeholder="ex: http://www.allure.com"></div>' +
            '<div class="col-md-2"><div class="row"><div class="col-md-12"><p><small>Select a Date and Time:</small></p></div></div><div class="row"><div class="col-md-12">' +
            '<div class="input-append date" id="dp3" data-date="12-02-2012" data-date-format="dd-mm-yyyy"><input class="span2" size="16" type="text" value="12-02-2012" readonly=""><span class="add-on"><i class="icon-calendar"></i>' +
            '</span></div></div></div><div class="row"><div class="input-append bootstrap-timepicker"><input id="timepicker1" type="text" class="input-small"><span class="add-on">' +
            '<i class="glyphicon glyphicon-time"></i></span></div></div></div><div class="col-md-2"><p><small>Recurring:</small></p><select id="recurring" class="form-control input-sm">' +
            '<option name="daily" value="daily">Daily</option><option name="weekly" value="weekly">Weekly</option><option name="month" value="month">Month</option></select></div>' +
            '<div class="col-md-2"><p><small>Day of Week:</small></p><div class="row"><div class="col-md-6"><label class="checkbox-inline"><input id="mon" name="test" type="checkbox" value="1"> Mon</label>' +
            '</div><div class="col-md-6"><label class="checkbox-inline"><input id="fri" name="test" type="checkbox" value="1"> Fri</label></div></div><div class="row"><div class="col-md-6">' +
            '<label class="checkbox-inline"><input id="tue" name="test" type="checkbox" value="1"> Tue</label></div><div class="col-md-6"><label class="checkbox-inline">' +
            '<input id="sat" name="test" type="checkbox" value="1"> Sat</label></div></div><div class="row"><div class="col-md-6"><label class="checkbox-inline">' +
            '<input id="wen" name="test" type="checkbox" value="1"> Wed</label></div><div class="col-md-6"><label class="checkbox-inline">' +
            '<input id="sun" name="test" type="checkbox" value="1"> Sun</label></div></div><div class="row"><div class="col-md-6"><label class="checkbox-inline">' +
            '<input id="thu" name="test" type="checkbox" value="1"> Thu</label></div></div></div><div class="col-md-1"><p><small>Remove:</small></p>' +
            '<button type="button" class="removeButton btn btn-default btn-sm"><span class="glyphicon glyphicon-minus-sign"></span></button></div></div>' )



        $('.removeButton').click(function() {
            $("#row1' + (counter) + '").remove();
        });

        counter++;


       $("#row1").after(test);
    });




});

Answers


You should use event delegation to add events to dynamically created elements. And use .closest() to get the first element that matches the selector. Try this:

$(document).on('click','.removeButton',function() {
     $(this).closest("div.row").remove();
});

You need to move your remove button click handler outside of add button click handler.

DEMO


You can try it.

$(document).on('click', '.removeButton', function(){
    $('#row1' + counter).remove();
});

1) You need to use event delegation here to bind click event to your button since it has been added dynamically to the DOM.

2) Use .closest() to remove the closest matching ancestor .row and remove redundant counter variable here:

3) You also need to move your click handler of remove button outside of the click handler of the add button.

Final code should look something like this:

$(document).ready(function () {
    $(".addButton").click(function () {
        var test = .....
        $("#row1").after(test);
    });

    $('.removeButton').click(function () {
        $(this).closest(".row").remove();
    });
});

Updated Fiddle


Need Your Help

HHVM with FastCGI install error

php linux ubuntu fastcgi hhvm

I'm getting below error when I try to install using apt-get install -y --force-yes hhvm-fastcgi:

Ruby-Rails serve ftp file direct to client

ruby-on-rails ruby file ftp download

I am new to ruby and to rails, so excuse my question... .