代码之家 › 专栏 › 技术社区 › PHPer

删除元素后的所有内容,包括文本

jquery javascript

PHPer · 技术社区 · 7 年前

我想删除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();

4 回复 | 直到 7 年前

Praveen Kumar Purushothaman 7 年前

你可以利用 .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 .contents() .

guest271314 7 年前

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>

AvcS 7 年前

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

function removeAllNodesAfter (node) {
    const parentNode = node.parentNode;
    while (parentNode.lastChild !== node) {
        parentNode.removeChild(parentNode.lastChild);
    }
};

removeAllNodesAfter($('.classone')[0]);

<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>

Cristiano Soares 7 年前

下面是一个使用无循环的解决方案:

$(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>