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

• 
  Dynamically Add Css Class To Fixed Div When It Is Scrolled To Another Html Element
• 
  How To Email Dynamic Block Of Html Code?
• 
  Electron Nodejs With C++ Class In Backend
• 
  Delete All Elements In A Class Except Two Anchor Tags