CODEWITHSUNDEEP
javascriptjqueryhtml
Vivek Dragon
Vivek Dragon

Reputation: 2248

Remove dynamically added li via button

I have created a <ul> which add <li> dynamically by a button with a remove button.

Initially the default li must not contain a remove so i added it in script

SCRIPT

$(document).ready(function(){
$("#add").click(function () 
{       
  $('.main').append('<br>');    
  $('.main').append($('.append_list').html());

  $('.main').append("<button class='rmv_btn' style='clear:both'> Remove </button>");

});                 
$(".rmv_btn").click(function () 
{
   $(this).remove("append_list");
  //Also tried this      $(this).closest('li').remove();
});
});

When i click the remove button that particular section only removed.....

HTML

     <ul class="main" style="list-style-type:none;">
<li class="append_list">
  <label>Product 1</label> <input type="text">
  <br>
   <label>Product 2</label> <input type="text">
  <br>
   <label>Product 3</label> <input type="text">
  <br>
   <label>Product 4</label> <input type="text">
  <br>

</li>
</ul>
<button id="add" style="clear:both">ADD NEW PRODUCTS</button>-

Here I made a bin in this.

How can i make this??

NOTE

I have made this process but till its complecated for i want to place the remove button next to the first textbox created here...

Upvotes: 1

Views: 1462

Answers (5)

Olaf Dietsche
Olaf Dietsche

Reputation: 74018

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

JSFiddle

HTML:

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

JS:

function remove_products(element) {
    $(element).prev().remove();
    $(element).remove();
}

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

Upvotes: 0

Adil
Adil

Reputation: 148110

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();

    });
});​

Upvotes: 1

Supericy
Supericy

Reputation: 5896

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

Upvotes: 1

Sibu
Sibu

Reputation: 4617

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

Upvotes: 2

bipen
bipen

Reputation: 36531

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..

Upvotes: 1

Related Questions