Question

I create a DIV dynamically:

        shareVisual = '<div class="individual-share">' + '<input type="number" value="1" /> X ' + classname.val() + '@' + classcurrency.val() + ' ' + classprice.val() + ' per share ' + '<button type="button" class="remove-share">Remove</button></div>';
        listOfSharesBox.append(shareVisual);  

---

Then add a bind to the parent div:

$("#list-of-shares").bind('click', '.remove-share', function(e) {
    $(e.target).closest("div").remove();
})

Problem: the div gets removed when any part of the dynamically generated DIV is clicked. I need this to work only when button is clicked. What do i need to change?

Answer 1

Use on, not bind, to delegate with a selector :

$("#list-of-shares").on('click', '.remove-share', function(e) {