How to remove div element with jQuery

Question

when I want to remove div element, I have the following code:

<div class='text-field'>
     <input type='text' />
     <input type='button' class='remove-btn' />
</div>
<div class='text-field'>
     <input type='text' />
     <input type='button' class='remove-btn' />
</div>
<div class='text-field'>
     <input type='text' />
     <input type='button' class='remove-btn' />
</div>
<div class='text-field'>
     <input type='text' />
     <input type='button' class='remove-btn' />
</div>

when i click remove-btn, its parent div text-field should be removed. i have this code but it doesnt work.

$(".remove-btn").click(function(){
    $(this).parent().remove();
});

thanks for any help. :)

thanks for your response guys, sorry im kinda new to this. actually, im trying to do this jsfiddle.net/pV2Wr — Kris
– Kris, Commented Jun 4, 2011 at 14:36
This works just fine: jsfiddle.net/pV2Wr/15. 1) jsFiddle requires you to put only JavaScript code in JavaScript panel. 2) It executes the JavaScript code after DOM load, so that must be your problem. There are solutions posted about this. — pimvdb
– pimvdb, Commented Jun 4, 2011 at 14:46
remove button does not work well, thanks for the info anyway :) — Kris
– Kris, Commented Jun 4, 2011 at 14:50

David · Accepted Answer · 2011-06-04 14:23:08Z

4

The most common cause for this is that you may be trying to bind to the click event before the element has been loaded in the DOM. Try wrapping your jQuery code in:

$(document).ready(function() {
  // your code here
});

There's also the .live() function which will bind to elements which are added to the DOM at a later time.

answered Jun 4, 2011 at 14:23

David

221k42 gold badges246 silver badges338 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Niklas · Accepted Answer · 2011-06-04 14:22:15Z

2

Make sure your javascript is loaded after DOM load.

$(function(){
 $(".remove-btn").click(function(){
    $(this).parent().remove();
 });
});

answered Jun 4, 2011 at 14:22

Niklas

30k5 gold badges54 silver badges74 bronze badges

Comments

Jazaret · Accepted Answer · 2011-06-04 14:43:23Z

1

After reading your comment here is what you should do:

$("#add-file-field").click(function() {
    $("#text").append("<div class='text-field'><input type='text' /> <input type='button' class='remove-btn' value='remove' /></div>");
});

$(".remove-btn").live('click',function() {
    $(this).parent().remove();
});

answered Jun 4, 2011 at 14:43

Jazaret

3,7053 gold badges19 silver badges15 bronze badges

1 Comment

Kris Over a year ago

wow, you saved my day man! thanks a lot. thanks also for all your response guys. :)

Collectives™ on Stack Overflow

How to remove div element with jQuery

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related