CODEWITHSUNDEEP
javascripthtml
Sahil Handique
Sahil Handique

Reputation: 17

Element is not hiding in javascript

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

Upvotes: 0

Views: 75

Answers (3)

Henry Xiloj Herrera
Henry Xiloj Herrera

Reputation: 304

Try with this

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

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

Code here:

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

Upvotes: 0

Jack
Jack

Reputation: 1999

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>

Upvotes: 0

Pavlo Stepura
Pavlo Stepura

Reputation: 373

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/

Upvotes: 3

Related Questions