CODEWITHSUNDEEP
javascriptjqueryhtml
AndreiB
AndreiB

Reputation: 3

How to remove a dynamically added div?

This is my HTML

<div class="form-group">
            <label>Categories</label>
            <button type="button" onclick="createContainer(availableCategories,'','.categoriesWrapper','Categories')" class="btn btn-default">+</button>
            <div class="categoriesWrapper">
            </div>
        </div>

Inside I'm adding more divs with 'child' class with this function:

function createContainer(datasource, selectedItem, wrapper, name) {
var maxFields = 10;
var $container = $('<div style="margin-top:5px;" class="child" />');
var $select = $("<select class='form-control littleSpace' name='" + name + "'/>");
var $button = $("<button type='button' class='delete btn btn-default ' '>-</button>");

if ($(wrapper).children().length < maxFields) {
    for (var itemId in datasource) {
        //check to see if the option is the selected one
        var isItemSelected = selectedItem && selectedItem === itemId;
        var $option = null;
        //create each option

        if (isItemSelected == true) {
            $option = $('<option value="' + itemId + '" selected>' + datasource[itemId] + '</option>');
        }
        else {
            $option = $("<option value='" + itemId + "'>" + datasource[itemId] + "</option>");
        }

        //append option to select
        $select.append($option);
    }
    $container.append($select);
    $container.append($button);
    $(wrapper).append($container);
}

};

Everything works great until now, but when I try to delete one o those divs and div content...it won't work. This is what I've tried:

$('.categoriesWrapper').on('click', 'delete', function () {
    $(this).parent.remove();

});

Please help me

Upvotes: 0

Views: 90

Answers (1)

Curiousdev
Curiousdev

Reputation: 5778

Pass class with . to make it work .delete inside click function as well as per @Rayon noticed change parent to parent()

$('.categoriesWrapper').on('click', '.delete', function () {
    $(this).parent().remove();
});

Upvotes: 4

Related Questions