Element is not hiding in javascript-CodePudding

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();
}

CodePudding user response：

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/

CodePudding user response：

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>

CodePudding user response：

Try with this

if( $('#list-div li').length === 0){

  $( "#delete" ).hide();
    $("#close-delete").hide();
    
}

Code here:

https://jsfiddle.net/HenryXilojHerrera/gy2rzjkp/11/