如何删除动态添加的div?

时间:2017-01-27 18:07:18

标签: javascript jquery html

这是我的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>

在我内部添加更多div与“孩子”#39;具有此功能的类:

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

};

到目前为止,一切都很有效,但是当我尝试删除其中一个div和div内容时......它不会起作用。这就是我尝试过的:

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

});

请帮帮我

1 个答案:

答案 0 :(得分:4)

使用.传递课程,使其在点击功能.delete内工作,同时@Rayon注意到更改parent更改为parent()

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