CODEWITHSUNDEEP
jqueryhtml
Kelbizzle
Kelbizzle

Reputation: 686

How do I remove element using .click and .remove in jQuery

Here is the JSfiddle

and here is my code.

HTML

<h2>Todo List</h2>
<div id='additem'>
    <input type='text' name='additem'/>
    <button>Add Item</button>
</div>
<div id='todolist'>
    <ol>
    </ol>
   <!-- Add item from "additem" input field -->
</div>

JS

$(document).ready(function(){
    $('button').click(function(){
        var item = $('input[name=additem]').val();
        $('ol').append('<li>'+ item +' <button id="remove">Remove</button></li>');
    });
    $("#remove").click(function(){
       $(this).parent('li').remove();
    });

   });

Upvotes: 1

Views: 14883

Answers (5)

cbaigorri
cbaigorri

Reputation: 2725

Since live() has been removed since jQuery 1.9 and you are using jQuery 2.0 in your jsfiddle the simple answer is to use on() as others have pointed out. http://jquery.com/upgrade-guide/1.9/#live-removed

I would also change the id to a class on the 'remove' button since there can be many of these. Also change parent() to closest() so if your markup changes slightly your code will still work.

http://jsfiddle.net/rfK5a/10/

$(document).ready(function(){
  $('button').click(function(){
    var item = $('input[name=additem]').val();
    $('ol').append('<li>'+ item +' <button class="remove-btn">Remove</button></li>');
  });
  $('#todolist').on('click', '.remove-btn', function(e) {
    $(this).closest('li').remove();
  });
});

Upvotes: 1

rahul maindargi
rahul maindargi

Reputation: 5615

Well here it is http://jsfiddle.net/rfK5a/7/

You will need below code

$(document).ready(function(){
    $('button').click(function(){
        var item = $('input[name=additem]').val();
        $('ol').append('<li>'+ item +' <button class="remove">Remove</button></li>');
    });
    $("#todolist").on("click",".remove",function(){
       $(this).parent('li').remove();
    });

   });

I will suggest to use remove class instead of remove id as you will be having multiple remove Buttons. and ideally we should not have more than one element with one id.

Upvotes: 1

Adil Shaikh
Adil Shaikh

Reputation: 44740

As you are creating remove button dynamically - You need to delegate click event like this

$("#todolist").on("click", "#remove", function(){
   $(this).parent('li').remove();
});

http://jsfiddle.net/mohammadAdil/rfK5a/6/

http://api.jquery.com/on/

Upvotes: 1

Tomas Kirda
Tomas Kirda

Reputation: 8413

You can add live event on the container:

$('#todolist').on('click', 'button', function(){
  $(this).closest('li').remove();
});

See updated fiddle: http://jsfiddle.net/tkirda/rfK5a/4/

Upvotes: 1

Adil
Adil

Reputation: 148110

You need to use on() for dynamically added elements using event delegation. You can delegate event to parent element that is available when you bind event using on or you can use document otherwise.

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

delegated events

Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, you can use delegated events to avoid the need to frequently attach and remove event handlers. This element could be the container element of a view in a Model-View-Controller design, Reference

Upvotes: 4

Related Questions