JQuery 排除子元素

Question

我有带有html的dom对象，如下所示：

<div class="parent">
    this is my <span>11</span> original text i <span>23</span> want
    <div class="child1">Lorem Ipsum is simply dummy text</div>
    <div class="child2">Lorem Ipsum is simply dummy text</div>
</div>

基本上我想删除所有不通过 jquery 跨越的子div。我试过了

myDom.find(".parent").immediateText()

但是上面的代码只返回文本，而不是我想要的跨度文本。我想要的结果如下：

this is my 11 original text i 23 want

Answer 1

$(".parent > [class^=child]").remove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
    this is my <span>11</span> original text i <span>23</span> want
    <div class="child1">Lorem Ipsum is simply dummy text</div>
    <div class="child2">Lorem Ipsum is simply dummy text</div>
</div>

Answer 2

在父类中找到div 并删除。

$('.parent').find('div').remove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
    this is my <span>11</span> original text i <span>23</span> want
    <div class="child1">Lorem Ipsum is simply dummy text</div>
    <div class="child2">Lorem Ipsum is simply dummy text</div>
</div>

或：

   $(document).find('.parent > div').remove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
    this is my <span>11</span> original text i <span>23</span> want
    <div class="child1">Lorem Ipsum is simply dummy text</div>
    <div class="child2">Lorem Ipsum is simply dummy text</div>
</div>

Answer 3

try this

$('.parent > div').remove();

Answer 4

使用 ：not(span( 选择器来选择所有不是 span 的内容。

$('.parent').find(':not(span)').remove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
    this is my <span>11</span> original text i <span>23</span> want
    <div class="child1">Lorem Ipsum is simply dummy text</div>
    <div class="child2">Lorem Ipsum is simply dummy text</div>
</div>

Answer 5

只需使用

Jquery 选择器.parent div选择具有类 parent 的元素内部的所有div，然后使用 remove() 将它们从 DOM 中删除：

$(document).ready(function(){
  $(".parent div").remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
    this is my <span>11</span> original text i <span>23</span> want
    <div class="child1">Lorem Ipsum is simply dummy text</div>
    <div class="child2">Lorem Ipsum is simply dummy text</div>
</div>

Answer 6

如果要

选择范围文本：

$(".parent span").text();

或

$(".parent").children("span").text();

如果要选择除范围之外的其他选项(并可能隐藏它们(：

$(".parent").find("div") //.hide() or .remove()