CODEWITHSUNDEEP
jquery
MAX POWER
MAX POWER

Reputation: 5448

Remove a DIV using a link

HTML:

<div class="row">
<!-- content -->
<a href="#" class="remove">remove</a>
</div>

JS:

$('.remove').click(function(){
  $(this).parent().remove();
  return false;
});

If there is only one DIV it works OK but when there are multiple DIVS (class="row") it won't do anything. No errors are returned either.

EDIT: I should add that by default there is only one div - additional divs get dynamically created using a jQuery clone function - perhaps this is why it won't recognise the new link/div?

Upvotes: 1

Views: 264

Answers (4)

Dutchie432
Dutchie432

Reputation: 29160

Seems to work just fine for me. Check out my JSFiddle (with added removal animation for fun)

UPDATE

each time you create a new items, you need to re-execute the code

doCloneObject();

//Once you create the new object(s), tell jQuery what to do with them.
$('.remove').click(function(){
    $(this).parent().toggle('fast', function (){
            $(this).remove();
    });
    return (false);
});

Upvotes: 0

David Thomas
David Thomas

Reputation: 253318

It works for me: JS Fiddle demo.

Given that the other divs are dynamically loaded, you need to use:

$('.remove').live('click',
  function(){
      $(this).parent().remove();
      return false;
});

JS Fiddle demo (featuring add and remove).

Upvotes: 1

Lazarus
Lazarus

Reputation: 43074

Make sure your code is only run once the whole page has loaded, i.e.:

$(document).ready(function() {
  $('.remove').click(function(){
    $(this).parent().remove();
    return false;
  });
});

Upvotes: 0

Rion Williams
Rion Williams

Reputation: 76547

If I am understanding you correctly - it seems to be working as intended - Demo

Upvotes: 0

Related Questions