Question

我有以下HTML，我要从第一个＆＃34; a＆＃34;中删除所有内容。到桌子。由于有些文字不在容器内，我无法弄清楚如何从一个点到另一个点

＆＃13;

$('.MyDiv a').nextUntil('.MyDiv table').remove();
$('.MyDiv a').nextUntil('table').remove();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="MyDiv">
  <div>div1</div>
  <div>div2</div>
  <div>div3</div>

  <!- Remove all below ->
  <a>a1</a>
  <a>a2</a>
  <a>a3</a>
  <ul><li>ul1</li></ul>
  Text with no wrap more text with no wrap
  <div>div4</div>
  Text with no wrap
  <!- Remove all above ->

  <table><tr><td>table</td></tr></table>
</div>

＆＃13;

新HTML应该如下所示

<div class="MyDiv">
  <div>div1</div>
  <div>div2</div>
  <div>div3</div>
  <table><tr><td>table</td></tr></table>
</div>

Answer 1

不像我想的那么简单。我正在使用contents和测试

可以使用addBack，但这很容易阅读和工作

＆＃13;

var found = false;
$('.MyDiv').contents().each(function() { 

  // debugging 
  var whitespace=this.nodeType==3, comment=this.nodeType==8, tag=this.nodeType==1;
  if (!whitespace) console.log(tag?this.tagName:"comment",this.textContent);
  // end debugging

  if (this.tagName=="A") found=true;
  if (found) { 
    // stop at first table - to stop at comment, test nodeType==8 instead
    if (this.tagName =="TABLE") {
      console.log("stopped");
      return false; 
    }
    else $(this).get(0).remove(); // dom / textnodes 
  }  
});

＆＃13;

.as-console-wrapper { max-height: 3.5em !important; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="MyDiv">
  <div>d1</div>
  <div>d2</div>
  <div>d3</div>

  <!- Remove all below ->
  <a>first a</a>
  <a>second a</a>
  <a>third a</a>
  <ul><li>an LI</li></ul>
  Text with no wrap more text with no wrap
  <div>d4</div>
  Text with no wrap
  <!- Remove all above ->
  <table><tr><td>Table <a href="">An embedded anchor</a></td></tr></table>
  After table
</div>

＆＃13;

Answer 2

一种方法是遍历两个注释节点之间的每个元素，并逐个删除它们。该解决方案假设评论＆＃39;内容是固定的，完全取决于那些。

＆＃13;

var comments = $(".MyDiv").contents()
  .filter(function() {
    return this.nodeType == 8 && this.textContent.trim() === 'Remove all below' || this.textContent.trim() === 'Remove all above';
  }).get();

var elem = comments[0].nextSibling;

while (elem !== comments[1]) {
  var next = elem.nextSibling;
  elem.remove();
  elem = next;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="MyDiv">
  <div></div>
  <div></div>
  <div></div>
  <p>before comment</p>
  <!-- Remove all below -->
  <a></a>
  <a></a>
  <a></a>
  <ul></ul>
  Text with no wrap more text with no wrap
  <div></div>
  Text with no wrap
  <!-- Remove all above -->
  <p>after comment</p>

  <table></table>
</div>

＆＃13;

Answer 3

为了好玩，我接受了@ mplungjan的回答，并把它变成了一个函数removeUntil，可以像以下一样使用：

$('.MyDiv a').removeUntil('table');

但由于表后的任何a元素也会匹配$('.MyDiv a')，您可能希望实际使用：

$('.MyDiv a:first-of-type').removeUntil('table');

由于你可能不想删除比第一级.MyDiv更深的内容（就像在表中找到的任何a一样），你实际上想要使用：< / p>

$('.MyDiv > a:first-of-type').removeUntil('table');

以下是removeUntil功能代码：

jQuery.fn.extend({
  removeUntil: function(untilSelector) {
    this.each(function() {
      var theStart = $(this);
      var theParent = theStart.parent();
      var found = false;
      theParent.contents().each(function() {
        if ($(this).is(theStart)) {
          found = true;
        }
        if (found) {
          if ($(this).is(untilSelector)) {
            return false;
          } else {
            $(this).get(0).remove(); // dom / textnodes 
          }
        }
      });
    });
  }
});

基于原始HTML的简单演示，但有两个.MyDiv部分：https://jsfiddle.net/b7fkm8g3/

使用jQuery删除从此处到此处的所有内容

3 个答案: