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

Answer 1

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.

Answer 2

Make sure your javascript is loaded after DOM load .

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

Answer 3

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