Question

我正在尝试使用链接删除一些元素。我想要删除的元素位于链接的父div中，但我似乎无法删除它们。

这是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>

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

  });

无论如何都要这样做，删除按钮会删除最接近div末尾的标签和输入？（或者是自动执行此操作）？

Answer 1

您正在访问.parent() .new-qr-answer-space 中的anchor节点。

事实上，您需要获得.sibling()，因为div.QR-answer-holder 不是父节点：

$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是一种方法，而不是属性。 jQuery对象中没有$方法，您使用find方法来定位子项：

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

编辑：

由于您实际上想要在链接之前获得最近的兄弟，您应该使用prev方法：

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

或者，如果您想删除div中的所有元素，只需：

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

Answer 3

尝试使用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

试

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

它应该删除标签和输入，因为它们在占位符

中

Answer 5

请参阅siblings：

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

这将从与此相同的dom节点中删除元素'.QR-answer-holder .QR-answer-label'。

如何删除父结构中的div？

5 个答案:

编辑：