Display None If Null Using Data-id

I have a menu which list items which display the the content on the other list. MENU

• 

  Solution 1:

  My frist idea: Loop the content list items and when no .content is available inside, remove the related menu item.

  $(function() {
      $("#gallery-container li[data-id]").each(function() {
          if( $(".content", this).length == 0 ) {
              $("#gallery-list li[data-id=" + $(this).data("id") + "]").remove();
          }
      });
  });
  

  As @XerenNarcy noticed in the comments, you can even use a not() and has() combined selector:

  $(function() {
      $("#gallery-container li[data-id]:not(:has(.content))").each(function() {
          $("#gallery-list li[data-id=" + $(this).data("id") + "]").remove();
      });
  });
  

  Instead of remove() you yould even use hide().

  Working example.

Share

You may like these posts

• 
  Find Class After A Certain Element
• 
  How Do I Add A Cycle Style Repeating Image Phase Background To My Website?
• 
  Change Url Depending On Click
• 
  How To Set The Maxlength Of A Textarea So That It Works Across All Browsers?