Question

0

68

Views

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

7 months ago · Juan Pablo Isaza

3 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-11T14:00:43.539Z

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/

Answer 2 · 2022-07-11T14:00:43.546Z

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>

Answer 3 · 2022-07-11T14:00:43.551Z

Try with this

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

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

Code here:

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