jQuery selector all elements except whose parent is div

user_924821 0
Viewed 460

Following is my HTML :

<div id="formdata">    
  <div id="to_select">
    <input type='hidden' name='to_be_selected' value='a' />
    <input type='hidden' name='also_to_be_selected' value='a' />
  </div>
  <input type='hidden' name='to_be_selected_too' value='a' />
  <div id="not_to_select">
    <input type='hidden' name='not_to_select' value='not selected'/>
  </div>    
</div>

How do I select only elements which are not in div#not_to_select

Following is what I have tried :

$("#formdata div:not(#not_to_select)").find('input')

$("#formdata").not("div#not_to_select").find('input,select,textarea')

$("#formdata").find('input,select,textarea').filter(function(){
      return $(this).parent().is(":not(#not_to_select)");
})
jquery javascript
2 Answers

To achieve this you could use filter() to exclude the inputs which are descendents of #not_to_select:

var $inputs = $('#formdata input').filter(function() {
  return $(this).closest('#not_to_select').length == 0;
});

$inputs.addClass('foo');
.foo { border: 1px solid #C00; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="formdata">
  <div id="to_select">
    <input type="text" name="to_be_selected" value="a" />
    <input type="text" name="also_to_be_selected" value="a" />
  </div>
  <input type="text" name="to_be_selected_too" value="a" />
  <div id="not_to_select">
    <input type="text" name="not_to_select" value="not selected" />
  </div>
</div>

Alternatively you could use :not() to exclude them:

var $inputs = $('#formdata input:not(#not_to_select input)');

$inputs.addClass('foo');
.foo { border: 1px solid #C00; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="formdata">
  <div id="to_select">
    <input type="text" name="to_be_selected" value="a" />
    <input type="text" name="also_to_be_selected" value="a" />
  </div>
  <input type="text" name="to_be_selected_too" value="a" />
  <div id="not_to_select">
    <input type="text" name="not_to_select" value="not selected" />
  </div>
</div>

user_5194130

I would suggest the following:

$(function() {
  var $inputs = $("#formdata input:not([name='not_to_select']");
  $inputs.each(function(i, el) {
    console.log(i, $(el).attr("name"));
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="formdata">
  <div id="to_select">
    <input type='hidden' name='to_be_selected' value='a' />
    <input type='hidden' name='also_to_be_selected' value='a' />
    <input type='hidden' name='not_to_select' value='not selected' />
  </div>
  <input type='hidden' name='to_be_selected_too' value='a' />
  <div id="not_to_select">
    <input type='hidden' name='not_to_select' value='not selected' />
  </div>
</div>

Since you're looking for a item with name attribute, you can use :not in to select that item to be excluded.

In my opinion, I would advise using class attribute. Can make it a lot easier to select groups of elements.

Hope that helps.

user_4633190
Related