The h5 i want to hide when there is no childrent in the ul element. The delete id element works as when i click on it, it fade in an image inside li element which has class cross. When the image is clicked it removes itself and it's previous sibling. The close-delete element when click hides the cross image. I want it to when there is no children in the ul element both delete id element and close-delete id element to hide. But not working This is the html.
<h5 id="delete">Delete</h5>
<h5 id="close-delete">hide</h5>
<ul id="list-div">
<li class="links"><a href="https://www.youtube.com" id="urlls"><div class="spann">youtube</div></a></li>
<li class="cross"><img src="images/x-button.png" class="cross"></li>
<li class="links"><a href="https://www.youtube.com" id="urlls"><div class="spann">heroku</div></a></li>
<li class="cross"><img src="images/x-button.png" class="cross"></li>
</ul>
javascript.
if($("#list-div").children().length() == 0){
$("#delete").hide();
$("#close-delete").hide();
}
For the code to work two things should be done:
Length should be called as length not length()
Second thing is that Your condition is wrong. In HTML Your div has children, but You are checking if it is empty. So double check Your condition here $("#list-div").children().length == 0.
Working example:
if($("#list-div").children().length !== 0){
$("#delete").hide();
$("#close-delete").hide();
}
JSFiddle: https://jsfiddle.net/he0921Lz/1/
Your issue is that .length() is not a method, but a property so you don't need ()
This should work.
if ($("#list-div").children.length == 0) {
$("#delete").hide();
$("#close-delete").hide();
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h5 id="delete">Delete</h5>
<h5 id="close-delete">hide</h5>
<ul id="list-div">
<li class="links">
<a href="https://www.youtube.com" id="urlls">
<div class="spann">youtube</div>
</a>
</li>
<li class="cross"><img src="images/x-button.png" class="cross"></li>
<li class="links">
<a href="https://www.youtube.com" id="urlls">
<div class="spann">heroku</div>
</a>
</li>
<li class="cross"><img src="images/x-button.png" class="cross"></li>
</ul>Try with this
if( $('#list-div li').length === 0){
$( "#delete" ).hide();
$("#close-delete").hide();
}
Code here: