CODEWITHSUNDEEP
javascriptjqueryhtml
Raihan
Raihan

Reputation: 4001

jQuery remove function not working

I have a Div with a link remove when I click on the remove this Div removed.

JS FIDDLE

    <div class="bar">
        <p style="float:left"> Hello world</p>
         <a href="#" style="float:right" class="delete"> remove </a>
    </div>

Here the div with Class .bar will remove when I click on the link remove which is working fine.

But I also created a link below the div(.bar) which is :

<a href="#" class="add">+ Add New</a>

On clicking +Add New will create a new .bar div.

$('.add').click(function() {
 $(".holder").prepend('<div class="bar"><p style="float:left"> Hello world</p> <a href="#" style="float:right" class="delete"> remove </a></div>');
});

But the Problem is when this new .bar div is created clicking on the remove not working. This new .bar div not remove.

why is that ? is there any other way to do this ? Any help will be much appreciated.

Upvotes: 0

Views: 936

Answers (5)

Rohit Subedi
Rohit Subedi

Reputation: 550

The selector will not recognize the new div added by the script. For this you need to add event delegation. Here's an example

  1. using "on"

    $('.delete').on('click', function(){
    $(this).parent('.bar').remove();
});

  2. using "live" (might be depreciated now. Please check)

    $('.delete').live('click', function(){
    $(this).parent('.bar').remove();
});

Upvotes: 0

Jai
Jai

Reputation: 74738

Change to this:

$(document).on('click', '.delete', function(e) {
    e.preventDefault(); // stops the jump

also a note, if you want to delegate the event then you should always try to delegate to the closest static parent (Which was available at the time of doc ready), so here in your case is <div class='holder'> then you can change to this:

    $('.holder').on('click', '.delete', function(e) {
        e.preventDefault(); // stops the jump

but here one more thing for note if you are delegating to the closest static parent then you have to put this click event in your "document ready block".

Upvotes: 0

VisioN
VisioN

Reputation: 145398

You should use event delegation:

$('.holder').on('click', '.delete', function() {
    $(this).parent('.bar').remove();
});

Here .holder is the closest static parent element.

DEMO: http://jsfiddle.net/jnLfh/5/

Upvotes: 1

Adil
Adil

Reputation: 148120

You need event delegation for dynamically added elements which are not present in DOM at the time of execution of event binding code. You can delegate event to static parent of dynamic element, in the given example you can delegate it to .holder or document

Live Demo

$(".holder").on('click', '.delete', function() {
 $(this).parent('.bar').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, jQuery Doc

Upvotes: 0

Satpal
Satpal

Reputation: 133403

You need to use Event Delegation. You have to use .on() using delegated-events approach.

i.e.

$(document).on('event','selector',callback_function)

Example

$('.holder').on('click', '.delete', function() {
    $(this).parent('.bar').remove();
});

In place of document you should use closest static container.

DEMO

The 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, we can use delegated events to bind the click event to dynamically created elements and also to avoid the need to frequently attach and remove event handlers.

Upvotes: 5

Related Questions