title: JQuery select and remove all ps that are not in a certain div?
body: <p>Ok, I have a pretty complicated html setup here, and in my function I need to remove all the ps (NOT just all divs, ps specifically) that are NOT within these 2 subclasses : <code>.panel-heading</code> and <code>.panel-body</code></p>
  
  <p>Originally I got all ps in the following:</p>
  
  <pre><code>&lt;div class="panel panel-default"&gt;
  
      &lt;div class="panel-heading" role="tab" id="headingEight"&gt;
  
          &lt;h4 class="panel-title"&gt;
              &lt;a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseNine2" aria-expanded="false" aria-controls="collapseNine2"&gt;
                  &lt;i class="fa fa-plus-square-o"&gt;&lt;/i&gt;
                  &lt;span style="margin-left: 12px; display: inline-block;"&gt;&lt;/span&gt;AirWatch and Workspace ONE
              &lt;/a&gt;   
          &lt;/h4&gt;
  
      &lt;/div&gt;
  
      &lt;div id="collapseNine2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingEight"&gt;
  
          &lt;div class="panel-body"&gt;
  </code></pre>
  
  <p>with this:</p>
  
  <pre><code>$(labArr[i].selector).find(".panel-default").find("p").remove()
  </code></pre>
  
  <p>And this works except its deleting literally all the ps, which I can't have. I know I need to use the not selector so Ive tried:</p>
  
  <pre><code>$(labArr[i].selector).find(".panel-default").find("div:not(.panel-body, .panel-heading)").remove();
  </code></pre>
  
  <p>and </p>
  
  <pre><code>$(labArr[i].selector).find(".panel-default:not(.panel-body, .panel-heading)").find("p").remove();
  </code></pre>
  
  <p>which did not work. I don't know why. </p>
  
  <p>How can I remove ALL ps in panel-default except the ones in those 2 classes?</p>