javascript - jQuery隐藏所有子代的父代

我实际上是在点击某个子元素后，尝试删除所有子元素的父元素
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中的某些元素具有完全相同的结构。

最佳答案

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

关于javascript - jQuery隐藏所有子代的父代，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33987812/