Remove Dynamically Added Li Via Button

I have created a

which add
• dynamically by a button with a remove button. Initially the default li must not contain a remove so i added it in script SCRIPT $(d

Solution 1:

Try this way,

$(document).ready(function(){
$("#add").click(function () 
{       
    $('.main').append($('.main > :first-child').clone());
    $('.main').append("<button class='rmv_btn' style='clear:both'> Remove </button>");

});                 
$('.main').on("click",".rmv_btn",function () 
{   $(this).prev('li').remove();
     $(this).remove();
});
});​

Working demo

Updated Demo

Solution 2:

use on().on attachs an event handler function for one or more events to the selected elements.

$(document).on('click',".rmv_btn",function ()
 .....

UPDATED

the code was appending elements inside <li> so your newly added elements was missing the <li> ... u need to append the element inside the <ul class=main> so that the added elements is wrapped inisde <li>

$("#add").click(function () {           
 //$('.main').append('<br>');
   $('ul.main').append($(".main").html());
   $('.main li:last').append("<button class='rmv_btn' style='clear:both'> Remove </button>");   
}); 

$(document).on("click", ".rmv_btn", function () 
{
   $(this).closest('li').remove(); // and add the closet() to remove to closest <li>

});​

fiddle here..

Solution 3:

One solution could just be attaching the remove function directly.

$(document).ready(function() {
    $("#add").click(function () {
        $('.main').append("<div><br />" + $('.append_list').html() + '<button class="rmv_btn" onclick="$(this.parentNode).remove()">Remove</button></div>');
    });
});

Demo

Solution 4:

You need to use on() for binding event on dynmically added controls. You also need to append the button in added li instead of adding in the rool of ul.

Live Demo

$(document).ready(function() {
    $("#add").click(function() {
        $('.main').append('<br>');
        $('.main').append($('.append_list :first').clone());
        $('.main li:last').append("<button class='rmv_btn' style='clear:both'> Remove </button>")
        $('.main li:last :input').val('');
    });

    $(document).on("click", ".rmv_btn", function() {
        $(this).closest('li').remove();

    });
});​

Solution 5:

A bit late, but I want to throw this one in, without the need for jQuery.on()

JSFiddle

HTML:

<ulclass="main"style="list-style-type:none;"><liclass="append_list"><label>Product 1</label><inputtype="text"><br><label>Product 2</label><inputtype="text"><br><label>Product 3</label><inputtype="text"><br><label>Product 4</label><inputtype="text"><br></li></ul><buttonstyle="clear:both"onclick="add_products()">ADD NEW PRODUCTS</button>-

JS:

functionremove_products(element) {
    $(element).prev().remove();
    $(element).remove();
}

functionadd_products() {
    $('.main').append($('.main > :first-child').clone());
    $('.main').append('<button style="clear:both" onclick="remove_products(this)"> Remove </button>');
}