Question 11039 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

How to delete dynamically added html code block – Jquery

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

Tags:

4

Answers


  1. 0

    Whole Content

    If you want to delete the whole content in box parent using jQuery, you should use this code:

    $(document).on("click", '#delete_row_box', function() {
    $("#box_parent").children().remove();
});

    One Row

    Do not use ID for repeatable tags. It’s not working in JS. Just use a suitable class name as I used in examples

    If you want a specific box appended to delete, then you should either give an id to the child during append or you should place the delete button inside the each box like a close button for each item.

    If row’s container is direct parent of the button

    Find the parent to remove using this code:

    $(document).on("click", '.delete_row_box', function() {
    $(this).parent().remove();
});

    If row’s container is a grand parent of the button

    Find the row you need to remove using this code:

    $(document).on("click", '.delete_row_box', function() {
    $(this).closest('fieldset').remove();
});
    • you can replace fieldset with the selector that matches your parent.
    Login or Signup to reply.
  2. 0

    Select its parent then delete the fieldset you add

    $(this).parent().remove()
    Login or Signup to reply.
  3. 0

    try to add an id and remove that id.
    This code should work fine and it will only delete "Some content", it will not remove the delete button you created. If you need to generate multiple content you can add an index when you create the content and a for or while loop to select the content to remove (with multiple delete button). You can even use a class instead of an id to delete them all in one go.

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

$(document).on("click", '#delete_row_box', function() {
    $("#content").remove();
});
    Login or Signup to reply.
  4. 0 
    var content = '<fieldset>Some Content <input id="delete_row_box" type="button" value="Delete"></fieldset>';
$("#box_parent").append(content);

$(document).on("click", '#delete_row_box', function() {
    $(this).closest('fieldset').remove();
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="box_parent"></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search