CODEWITHSUNDEEP
jqueryhtml
Vipul L.
Vipul L.

Reputation: 595

JQuery Exclude Child element

I am having dom object with html as below:

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

Basically I want to remove all child divs not span by jquery. I tried,

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

But above code return only text not span text that I wanted. I want the result as below :

this is my 11 original text i 23 want

Upvotes: 0

Views: 58

Answers (6)

Saw Zin Min Tun
Saw Zin Min Tun

Reputation: 642

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

Upvotes: 1

Ali Sheikhpour
Ali Sheikhpour

Reputation: 11055

If you want to select the span text:

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

or

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

If you want to select others except the span (and perhaps hide them):

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

Upvotes: 0

Ankit Agarwal
Ankit Agarwal

Reputation: 30739

Just use .parent div Jquery selector to select all the div inside element having class parent and then use remove() to remove them from 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>

Upvotes: 1

Ishwar Patil
Ishwar Patil

Reputation: 1736

Use :not(span) selector to select everything which is not 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>

Upvotes: 1

Athul Nath
Athul Nath

Reputation: 2606

TRy this 

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

Upvotes: 1

4b0
4b0

Reputation: 22323

Find div inside parent class and remove.

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

OR: 

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

Upvotes: 1

Related Questions