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

Answer 2

 $("#delete").click(function() {
  var elem = $(this);
  //Other code
  $.ajax({
    data: {},
    success: function(data) {
      elem.siblings().remove();
      elem.closest(".container").remove();
    }
  });

Answer 3

你有没有尝试过这样的事情

 $(".content").children().hide();