Question

Once again I’m hoping your joint expertise will help find an elegant solution. I’m automating a report to minimize human input (and error). The base of the report is a webpage, which has the following code:

</p></li>

 <li>ARTICLE 1<br />
    <p>    
       <div class="list">
           Nothing found. 
       </div>
    </p>
 </li>
 <li>
    <p>ARTICLE 2</p>    
    <div class="list">
    <h4 class="sub-heading">ITEMS</h4>
     <ul>
        <li class="item">
           <span class="title"> 

The p elements are created by me, while the div class=”list” are outputs of a plugin beyond my reach. Basically the plugin scans the databases with certain query, and produces either a list of items found for given query or a “Nothing found” string. The operators then copypaste it to somewhere and remove the “ITEMS” header and “Nothing found.” to make the report more readable.
What I managed to do so far is using these jqueries:

$(".list .sub-heading").addClass("hidden");
$(".list:contains('Nothing found.')").addClass("hidden");

What I would like to achieve is add a jquery, that removes not only the divs containing “Nothing found.”, but also the preceeding element, which is the line containing “ARTICLE 1” in the above example.
Please assist if you could produce a reasonable solution. Thanks in advance.

Answer 1

You can you closest method and hide the li element which hides all of it’s content:

$(".list:contains('Nothing found.')").closest('li').addClass("hidden");