javascript - jQuery 隐藏父级及其所有子级

Question

在实际单击其中一个子元素后，我试图删除父元素及其所有子元素 HTML:

<div class='container'>
    <span class='content' id='1'>Lorem</span>
    <span class='content' id='2'>Ipsum</span>
    <span class='content' id='3'>Dolor</span>
    <span class='content' id='4'>Sit</span>
    <span id='delete'>Delete</span>
</div>

jQuery:

$("#delete").click(function() {
  var name = $(this).siblings("#1").text();
  var surname = $(this).siblings("#2").text();
  var add = $(this).siblings("#3").text();
  var all = $(this).siblings("#4").text();
  $.ajax({
    data: {
      'name': name,
      'surname': surname,
      'add': add,
      'all': all
    },
    success: function(data) {
      $(this).siblings().remove(); // context of 'this' lost? doesnt work
      $(this).parent().remove();

    }
  });
});

请记住。其中一些元素的 container 类具有完全相同的结构。

Answer 1

将 this 的值存储在成功回调范围之外的变量中。

$("#delete").click(function() {
  var self = this;
  // ...

  $.ajax({
    data: {},
    success: function(data) {
      $(self).siblings().remove();
      $(self).parent().remove();
    }
  });
});

值得指出的是，删除父元素也会删除所有子元素。这意味着您不必在删除父元素之前删除同级元素。

$(self).parent().remove(); // No need to remove siblings, they will be removed.

但是，您可能想要删除同级元素，然后解包该元素。这样做时，您可以保留 #delete 元素(如果您想要这样做)。

$(self).siblings().remove();
$(self).unwrap();