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