Valde Valde - 1 month ago 10
HTML Question

JQuery is it possible to show message when ul element is empty and hide on items' add?

The question is in the title. I have an ul element with no list items, and I need to show a message (it can be a li element) where the user can see that the list is empty. Once an item is added to the ul, the message should hide or remove.

The list can be updated dynamically, so if someone removes all the li elements contained on the ul, it should display the message again.

I have this, but only displays the message when the page loads:

if( !$("#minuta_minuta_participante_list_ul").has("li").length ) {
$("#minuta_minuta_participante_list_ul").html("Sorry, this is empty");

Sorry if the question is to poor. Thanks in advance.


You can do it with CSS empty and before, no need for JavaScript to add/remove the message.

ul:empty:before {
  content: "I am empty"

<h3>Not Empty</h3>