CODEWITHSUNDEEP
jqueryhtml
worldwildwebdev
worldwildwebdev

Reputation: 414

Unable to remove() html element

I have a button that add a new set of fields. In the fields itself the button is to remove himself with the fieldset but the remove is not working. Where is my mistake? 

<fieldset id="adjust_field"><a id="add_new_field"> Add </a></fieldset>
<script> jQuery(document).ready(function($){
        $("a#add_new_field").click(function(){
            var inserted_new_field = '<fieldset id="to_be_removed"></fieldset><a id="remove_new_field" > Remove </a>';
            $("fieldset#adjust_field").append(inserted_new_field); 
        });
    });
jQuery(document).ready(function($){
        $("a#remove_new_field").click(function(){

            $("fieldset#to_be_removed").remove();
            $('fieldset#to_be_removed').children().remove(); // Tried and this option
        });
    });

Upvotes: 0

Views: 42

Answers (1)

Milind Anantwar
Milind Anantwar

Reputation: 82241

You need to use event delegation as a#remove_new_field is added dynamically:

 $('fieldset#adjust_field').on('click','a#remove_new_field',function(){
        $("fieldset#to_be_removed").remove();
 });

Upvotes: 4

Related Questions