javascripthtmljquerydynamic-forms

How to delete dynamically added html code block

I have a button which dynamically creates html content enclosed in <fieldset> like this.:

<div id="box_parent"></div>

Javascript

var content = 
'<fieldset>Some Content <input id="delete_row_box" type="button" value="Delete"></fieldset>';
$("#box_parent").append(content);

How can I make the dynamically created delete button only deletes the html block that it only belongs to?

I'm stuck on this function:

$(document).on("click", '#delete_row_box', function() {
    console.log(this);
});

I think .remove() should do it but I don't know how to throw the correct reference

Solution

  • Select its parent then delete the fieldset you add

    $(this).parent().remove()