How to remove a div in the parent structure?

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 autom开发者_运维技巧atically)?

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

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

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.

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

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