使用jQuery删除动态生成的HTML

Question

I want to remove dynamically generated '.row' but it is possible only for the static one. Second row is generated dynamically.

I wanted to provide image but I have not enough reputation. Here are my code snippets:
1. Static '.row'

        <div class="col-sm-4" style="padding-left: 0;">
            <select>
                <option value="">Skill Level</option>
                <option value="">1</option>
                <option value="">2</option>
                <option value="">3</option>
            </select>
        </div>
        <div class="col-sm-2" style="padding-left: 0;">
            <div class="delete-myskill-candidate progress-bar-candidate toggle">
                <a class="progress-bar-candidate-toggle">-</a>
            </div>
        </div>
    </div>
</div>

2. Code for removing '.row'. Works fine for static row but it can't remove dynamically generated rows.

$('.delete-myskill-candidate').on('click', function (events) {     
    $(this).closest(".row").remove();  
});

3. Rows are generated based on static one and jQuery append().

$("#mySkills").append(firstDiv.append(selectList).append(deleteButton));

firstDiv, selectList and deleteButton are same as in HTML.

I think that dynamically generated content need some kind of 'binding' but I don't have a clue how to achieve that. Any suggestions?

Answer 1

Use delegated events.

Direct and delegated events

Event handlers are bound only to the currently selected elements; they must exist at the time your code makes the call to .on() . To ensure the elements are present and can be selected, place scripts after the elements in the HTML markup or perform event binding inside a document ready handler. Alternatively, use delegated events to attach event handlers.

Just change the click handler from

$('.delete-myskill-candidate').on('click', function (events) {     
    $(this).closest(".row").remove();  
});

to

$('selector of upper most parent').on('click', '.delete-myskill-candidate', function (events) {     
    $(this).closest(".row").remove();  
});