Question

我需要快速解决一些看似简单的问题：

我想删除html元素中特定元素之后的所有内容，包括文本。

我有：

<div class="main-container">
Some text and <a href="" class="classone">SOME HTML</a>. 
I also have someother text, and some more <b>html</b> 
</div>

我想删除该主容器中“ classone”元素之后的所有内容。

我尝试过$('.main-container').nextAll().remove();，但这只会删除html。

Answer 1

从父节点中删除最后一个节点，直到所需的节点成为父节点的最后一个节点。

@celery.task()
def celery_task:
    current_user=User.query.filter...
    example(data)

function removeAllNodesAfter (node) {
    const parentNode = node.parentNode;
    while (parentNode.lastChild !== node) {
        parentNode.removeChild(parentNode.lastChild);
    }
};

removeAllNodesAfter($('.classone')[0]);

Answer 2

您可以使用.contents()：

$(function () {
  var FoundClass = false;
  
  $(".main-container").contents().filter(function (s, el) {
    if ($(el).hasClass("classone")) {
      FoundClass = true;
      return false;
    }
    return FoundClass;
  }).remove();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main-container">
  Some text and <a href="" class="classone">SOME HTML</a>. I also have someother text, and some more <b>html</b>
</div>

这有点怪异，因为我使用了标志FoundClass。如果有更好的解决方案，我总是很欢迎。这就是我想出的jQuery .contents()。

Answer 3

while它们存在于DOM中，您可以删除.classone .nextSibling。

const one = document.querySelector(".classone");

while (one.nextSibling) one.parentElement.removeChild(one.nextSibling);

console.log('done');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<div class="main-container">
Some text and <a href="" class="classone">SOME HTML</a>. 
I also have someother text, and some more <b>html</b> 
</div>

Answer 4

这是不使用循环的解决方案：

$(document).ready(function() {
    'use strict';
  const content = $(".main-container").html();
  const element = $(".main-container .classone").html();
  const index = content.indexOf(element);
  $(".main-container").html(content.substr(0, index + element.length));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main-container">
Some text and <a href="" class="classone">SOME HTML</a>. 
I also have someother text, and some more <b>html</b> 
</div>

删除所有内容，包括元素后的文字

4 个答案: