CODEWITHSUNDEEP
jqueryjquery-filter
Fidel90
Fidel90

Reputation: 1838

Remove from set of matched Elements with jQuery

I have the following example html:

<div id="root">
    <span>A</span><!--select-->
    <span>B</span><!--select-->
    <div>
        <span>C</span>
        <span>D</span>
        <div>
            <span>E</span>
        </div>
    <div>
    <p>
        <span>F</span><!--select-->
        <div>
            <span>G</span>
        </div>
    </p>
</div>

I want to select all spans except the ones, that are childs of other divs. spans that are children of other elements (such as p, button or anything else) shoud be selected. The p is just an example. This means I want to have span A, B and F. I tried:

$("#root").find("span").not("div span");

But .not("div span") removes all spans as the root Element is also a div. Is there a way with jQuery?

Upvotes: 3

Views: 131

Answers (4)

Milind Anantwar
Milind Anantwar

Reputation: 82241

You can have a selector to target immediate child span elements and span elements in immediate p element:

var target = $("#root").find("> span, >*:not(div) span");


 $(function(){
    $("#root").find("> span,*:not(div) span").css('color','red');
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="root">
    <span>A</span><!--select-->
    <span>B</span><!--select-->
    <div>
        <span>C</span>
        <span>D</span>
        <div>
            <span>E</span>
        </div>
    <div>
    <p>
        <span>F</span><!--select-->
        <div>
            <span>G</span>
        </div>
    </p>
</div>

Upvotes: 1

Jai
Jai

Reputation: 74738

You can use .filter() method: 

$('#root span').filter(function(){
    return this.parentNode.id == 'root' || this.parentNode.tagName.toLowerCase() != 'div'
}).addClass('found');
.found{border:solid 1px red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="root">
  <span>A</span>
  <!--select-->
  <span>B</span>
  <!--select-->
  <div>
    <span>C</span>
    <span>D</span>
    <div>
      <span>E</span>
    </div>
    <div>
      <p>
        <span>F</span>
        <!--select-->
        <div>
          <span>G</span>
        </div>
      </p>
    </div>

Upvotes: 1

Suman Pathak
Suman Pathak

Reputation: 300

You can use :

$("#root").find("span").not("#root>span");

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388326

You can try

$('#root span').not('#root div span').css('color', 'red')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="root">
  <span>A</span>
  <!--select-->
  <span>B</span>
  <!--select-->
  <div>
    <span>C</span>
    <span>D</span>
    <div>
      <span>E</span>
    </div>
  </div>
  <p>
    <span>F</span>
    <!--select-->
    <div>
      <span>G</span>
    </div>
  </p>
</div>

Note: Your html is invalid as p can't have div element as its child.

Upvotes: 4

Related Questions