Question

I have the following HTML

<ul>
  <li>
  some text here
  <ul>
    <li>cat1</li>
  </ul>
 </li> 
</ul>

<ul>
  <li>
  random stuff here
  <ul>
    <li>item1</li>
  </ul>
 </li> 
</ul>

Is there a way I can target the text in between the <ul><li> </ul> i.e. some text here and random stuff here? I’d really like to hide this text if possible.

Thanks

Answer 1

If you’re ok with removing the text, instead of merely hiding it, you could do this:

$('ul > li:has(ul)').each(function() {    
   if( this.firstChild.nodeType === 3 ) {
       this.removeChild( this.firstChild );
   }
});

This looks at the top level <li> elements, check to see if their firstChild is a text node, and if so, removes it.

Example: http://jsfiddle.net/3B32a/

It would be better to identify the top level with a class on the ul elements.

If you actually want to show and hide it, it will need to be contained in an element, instead of a standalone text node.