CODEWITHSUNDEEP
jquery
Prisoner ZERO
Prisoner ZERO

Reputation: 14166

Selecting All FORM Elements Except in Certain Area(s)

Maybe my understanding of the NOT Selector is wrong....but I am trying to select every element on a form that is NOT in a certain 'area' of the FORM.

I am trying to grab every element except for those within the "meter-detail" area of the overall form.

HTML SAMPLE:
Only the top 4 & bottom 4 elements should be chosen. Nothing in the "meter-detail" area should be chosen.

<form>
     <input id="Entity_DeviceName" type="text" value="" />
     <input id="Entity_BalancedZone" type="text" value="" />
     <input id="Entity_FlowDirection" type="text" value="" />
     <input id="Entity_AreaName" type="text" value="Intrastate" />

     <div class="meter-detail">
          <div class="meter-blade" data-id="1">
               <input id="Entity_MeterName" type="text" value="1111" />
               <input id="Entity_MeterNumber" type="text" value="1111" />
          </div>
          <div class="meter-blade" data-id="2">
               <input id="Entity_MeterName" type="text" value="2222" />
               <input id="Entity_MeterNumber" type="text" value="2222" />
          </div>
     </div>

     <input id="Entity_Producer" type="text" value="" />
     <input id="Entity_ProducerContactName" type="text" value="" />
     <input id="Entity_ProducerPhone" type="text" value="" />
     <input id="Entity_ProducerEmail" type="text" value="" />
</form>

However, upon inspection...

enter image description here

Upvotes: 1

Views: 266

Answers (2)

jiali
jiali

Reputation: 616

You can use this code:

let elements = $('form *').not('.meter-detail, .meter-detail *');

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337560

There's no selector to explicitly exclude elements based on a parent. However you can achieve what you need by using filter() and providing your own logic to check for that parent element. Try this:

let $inputs = $('form :input').filter((i, el) => $(el).closest('.meter-detail').length == 0);

$inputs.addClass('foo'); // just for this demo
input { 
  width: 50px;
  border: 1px solid #CCC;
  margin: 2px;
}

.foo {
  background-color: #5dda5d2e;
  border: 1px solid #0C0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <input id="Entity_DeviceName" type="text" value="" />
  <input id="Entity_BalancedZone" type="text" value="" />
  <input id="Entity_FlowDirection" type="text" value="" />
  <input id="Entity_AreaName" type="text" value="Intrastate" />

  <div class="meter-detail">
    <div class="meter-blade" data-id="1">
      <input id="Entity_MeterName" type="text" value="1111" />
      <input id="Entity_MeterNumber" type="text" value="1111" />
    </div>
    <div class="meter-blade" data-id="2">
      <input id="Entity_MeterName" type="text" value="2222" />
      <input id="Entity_MeterNumber" type="text" value="2222" />
    </div>
  </div>

  <input id="Entity_Producer" type="text" value="" />
  <input id="Entity_ProducerContactName" type="text" value="" />
  <input id="Entity_ProducerPhone" type="text" value="" />
  <input id="Entity_ProducerEmail" type="text" value="" />
</form>

Note that this is assuming that your HTML in the working version is more complex than displayed in the question, otherwise you can simply use:

let $inputs = $('form > :input');

Upvotes: 2

Related Questions