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

jQuery将父级及其所有子级隐藏起来

3 个答案: