Question

I’ve the following html –

<ul>
   <li class=".item">
      <a href="test">
         <li class=".item">
            <a href="test">
               <li class=".item">
                  <a href="http://test">
                        Real content 1
                  </a>
                </li>
            </a>
         </li>
      </a>
   </li>
   <li class=".item">
      <a href="test">
         <li class=".item">
            <a href="test">
               <li class=".item">
                  <a href="http://test">
                       Real Content 2
                  </a>
                </li>
            </a>
         </li>
      </a>
   </li>
</ul>

This is the output rendered by an application. The li’s are nested inside with the same class. I need to just have the innermost one and remove the dummy parents and get this –

<ul>
   <li class=".item">
      <a href="test">
         Real Content 1
      </a>
   </li>
   <li class=".item">
      <a href="test">
         Real Content 2
      </a>
   </li>
</ul>

Any idea how I can achieve this using JQuery?

Answer 1

jsfiddle

$("ul >li").filter(function(){
      return $(this).text().trim() == ''
}).remove();

 $('ul li  a').filter(function(){
         return $(this).text().trim() == ''
}).remove();

​