CODEWITHSUNDEEP
javascriptjqueryhtmlcss
FullContactCoder
FullContactCoder

Reputation: 169

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);
    });




});

Upvotes: 7

Views: 31022

Answers (3)

Felix
Felix

Reputation: 38112

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

Upvotes: 1

Kiran
Kiran

Reputation: 20293

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

Upvotes: 23

lighter
lighter

Reputation: 2806

You can try it.

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

Upvotes: 1

Related Questions