如何在父结构中删除div？

Question

I am trying to remove some elements using a link. The elements that I am trying to remove are in a link's parent div, but i cannot seem to remove them.

Here is the HTML:

                  <div class="QR-answer-holder">
                  <label class="QR-answer-label">Enter an answer:</label>
                  <input class="QR-answer-input textbox" type="text" name="answer" />
              </div>
                <a class="new-answer new-qr-answer-space" href="javascript:void(0)">New answer space</a> | 
                <a class="remove-answer remove-qr-answer-space" href="javascript:void(0)">Remove Answer Space</a>

Here is the JQuery:

      $remove_qr_answer = $(".remove-qr-answer-space");
  $remove_qr_answer.live("click", function() {
      $(this).parent.$(".QR-answer-holder").$(".QR-answer-label").remove();
      $(this).parent.$(".QR-answer-holder").$(".QR-answer-input").remove();

  });

Is there anyway to make it so the remove button removes the label and input closest to the end of the div? (or does it do that automatically)?

Answer 1

You're accessing the .parent() node from that anchor .new-qr-answer-space .

Infact, you need to get the .sibling() , since the div.QR-answer-holder is not the parent node:

$remove_qr_answer = $(".remove-qr-answer-space");
$remove_qr_answer.live("click", function() {
    $(this).siblings(".QR-answer-holder").find(".QR-answer-label:last, .QR-answer-input:last").remove();
});

Answer 2

parent is a method, not a property. There is no $ method in the jQuery object, you use the find method to locate children:

$(this).parent().find(".QR-answer-holder .QR-answer-label").remove();
$(this).parent().find(".QR-answer-holder .QR-answer-input").remove();

Edit:

As you actually want to get the closest sibling before the link, you should use the prev method instead:

$(this).prev().find(".QR-answer-holder .QR-answer-label").remove();
$(this).prev().find(".QR-answer-holder .QR-answer-input").remove();

Or if you want to remove all elements in the div, simply:

$(this).prev().empty();

Answer 3

Try using this

HTML:

<div class="QR-answer-holder">
    <label class="QR-answer-label">Enter an answer:</label>
    <input class="QR-answer-input textbox" type="text" name="answer" />
</div>
<a class="new-answer new-qr-answer-space" href="#">New answer space</a> | 
<a class="remove-answer remove-qr-answer-space" href="#">Remove Answer Space</a>

JavaScript:

$remove_qr_answer = $(".remove-qr-answer-space");
$remove_qr_answer.live("click", function(e) {
    e.preventDefault();
    $(this).siblings(".QR-answer-holder").find(".QR-answer-label,.QR-answer-input").remove();
});

Answer 4

try

$remove_qr_answer = $(".remove-qr-answer-space");   
$remove_qr_answer.live("click", function() {
       $(this).parent().find($(".QR-answer-holder").remove();        
}); 

and it should remove the lable and input as those are inside the placeholder

Answer 5

see siblings :

$(this).siblings('.QR-answer-holder .QR-answer-label').remove();

this would remove the elements '.QR-answer-holder .QR-answer-label' from the same dom node as this.