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()，但效果不佳。由于子div标签的数量在某些页面中有所不同，因此我无法使用nth-last-child()。是否可以找到像$('.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已经发布了perfectly good jQuery answer，但似乎值得添加一个普通的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选择器删除某些元素

3 个答案: