Exclude an item and its content elements

Ashkan Mobayen Khiabani Published at Dev

Ashkan Mobayen Khiabani

There are tons of elements in my page and I'm trying to make only a div including all its content printable.

I have this css:

@media print
{    
    .no-print, .no-print *
    {
        display: none !important;
    }
}

Now before </body> I want to run a jQuery code so that adds .no-print class to every div but .content and its containing elements.

to exclude .content I know what I have to do:

$('div:not(.content)').addClass('no-print');

But to also exclude its content I tried:

$('div:not(.content,.content *)').addClass('no-print');

and

$('div:not(.content),div:not(.content *)').addClass('no-print');

but none of them have the desired result. The code adds .no-print to all of the divs. and printing shows an empty page.

Update: I don't think html would be required in here. but as comments ask for it, I add an example:

<div>
   <div class="header">...</div>
   <div class="nav">...</div>
   <div class="menu>
       <ul>
          <li>menu item 1</li>
          <li>menu item 2</li>
          <li>menu item 3</li>
          <li>menu item 4</li>
          <li>menu item 5</li>
      </ul>       
   </div>
   <div class="sidebar">...</div>
   <div class="content">
       <div><table>....</table></div>
       <div><table>....</table></div>
       <div><table>....</table></div>
  </div>
   <div class="footer">...</div>
</div>

gaetanoM

You may use filter:

var elements = $('div:not(.content) *').filter(function(index, element) {
      return $(this).closest('div.content').length == 0;
});

$(function () {
  var elements = $('div:not(.content) *').filter(function(index, element) {
    return $(this).closest('div.content').length == 0;
  });
  
  elements.each(function(index, element) {
       console.log(index + ' --->  ' + element.outerHTML.substring(0, 30) + '....');
   });
});

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<div>
    <div class="header">YES...</div>
    <div class="nav">YES...</div>
    <div class="menu">
        YES
       <ul>
           YES
          <li>menu item 1</li>
          <li>menu item 2</li>
          <li>menu item 3</li>
          <li>menu item 4</li>
          <li>menu item 5</li>
      </ul>
   </div>
   <div class="sidebar">YES...</div>
<div class="content">
    NO
    <div>NO<table>....</table></div>
    <div>NO<table>....</table></div>
    <div>NO<table>....</table></div>
</div>
<div class="footer">YES...</div>
</div>

Collected from the Internet

Please contact [email protected] to delete if infringement.