jquery 删除某些元素的选择器

Question

我有一个页面列表，每个页面都有以下代码部分

<div class="A">
  <br>
  some text.
  some <b>more</b> text.
  <br>
  More text to follow <a href="link">here</a>
  <br>
  <br>
  <div class="B">
    <div class="z">
     <span class="y">text</span>
    </div>
  </div>
  <div class="C">text</div>
  <p>text</p>
  <div class="D">text</div>
</div>

我想删除 B 到 D 的标签。我试过 slice() 但效果不佳。我不能使用 nth-last-child()，因为子 div 标签的数量在某些页面中有所不同。是否可以找到像 $('.A').not('.B,.C,.D').html() 或 $('.A').not('.B to .D').html() 这样的 jquery 选择器？

Answer 1

首先你打错了，不是<a href="link">here</b>而是<a href="link">here</a>

那么你可以使用find()

$('.A').find('.B,.C,.D').remove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="A">
  <br>
  some text.
  some <b>more</b> text.
  <br>
  More text to follow <a href="link">here</a>
  <br>
  <br>
  <div class="B">
    <div class="z">
     <span class="y">text</span>
    </div>
  </div>
  <div class="C">text</div>
  <p>text</p>
  <div class="D">text</div>
</div>

其他方法是使用 children()

$('.A').children('.B,.C,.D').remove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="A">
  <br>
  some text.
  some <b>more</b> text.
  <br>
  More text to follow <a href="link">here</a>
  <br>
  <br>
  <div class="B">
    <div class="z">
     <span class="y">text</span>
    </div>
  </div>
  <div class="C">text</div>
  <p>text</p>
  <div class="D">text</div>
</div>

你可以用纯 CSS

.A>div:nth-last-of-type(-n+3) {
  display: none
}

<div class="A">
  <br>
  some text.
  some <b>more</b> text.
  <br>
  More text to follow <a href="link">here</a>
  <br>
  <br>
  <div class="B">
    <div class="z">
     <span class="y">text</span>
    </div>
  </div>
  <div class="C">text</div>
  <p>text</p>
  <div class="D">text</div>
</div>

Answer 2

虽然 dippas 已经发布了，但似乎值得添加一个普通的 JavaScript 替代方案：

// find the parent element, here we use document.querySelector()
// which returns the first (if any) or null (if none) node
// matching he supplied selector:
document.querySelector('.A')

// from there we find the relevant descendent elements, using a
// CSS selector which returns a NodeList containing all elements
// matching the supplied selector(s):
.querySelectorAll('.B, .C, .D')

// using NodeList.prototype.forEach() to iterate over the
// NodeList result supplied from Element.querySelectorAll():
.forEach(

  // an Arrow function to apply to each of the Nodes in the
  // NodeList over which we're iterating; 'child' is a reference
  // to the current Node of the NodeList.

  // here we call ChildNode.remove() to remove the node:
  child => child.remove()
);

document.querySelector('.A').querySelectorAll('.B, .C, .D').forEach(child => child.remove());

*,
 ::before,
 ::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.B,
.C,
.D {
  background-color: limegreen;
}

<div class="A">
  <br> some text. some <b>more</b> text.
  <br> More text to follow <a href="link">here</a>
  <br>
  <br>
  <div class="B">
    <div class="z">
      <span class="y">text</span>
    </div>
  </div>
  <div class="C">text</div>
  <p>text</p>
  <div class="D">text</div>
</div>

参考文献：

Answer 3

参考 dippas 和 David Thomas 以及另一位 source 的回答，我找到了适用于我使用的应用程序的正确 jquery 选择器。

$('.A').clone().children('.B,.C,p,.D').remove().end().html()

jquery 删除某些元素的选择器

jquery selector to remove certain elements

jquery

jquery-selectors