El h5 que quiero ocultar cuando no hay niños en el elemento ul. El elemento de identificación de eliminación funciona como cuando hago clic en él, se desvanece en una imagen dentro del elemento li que tiene una cruz de clase. Cuando se hace clic en la imagen, se elimina sola y su hermano anterior. El elemento cerrar-eliminar al hacer clic oculta la imagen cruzada. Quiero que cuando no haya elementos secundarios en el elemento ul, elimine el elemento de identificación y el elemento de identificación de cierre-eliminación para ocultar. Pero no funciona Este es el 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(); }
Para que el código funcione se deben hacer dos cosas:
La longitud debe llamarse como length
, no como length()
Lo segundo es que Tu condición es incorrecta. En HTML, su div tiene hijos, pero está comprobando si está vacío. Así que verifique dos veces Su condición aquí $("#list-div").children().length == 0
.
Ejemplo de trabajo:
if($("#list-div").children().length !== 0){ $("#delete").hide(); $("#close-delete").hide(); }
JSFiddle: https://jsfiddle.net/he0921Lz/1/
Su problema es que .length()
no es un método, sino una propiedad, por lo que no necesita ()
Esto debería funcionar.
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>
Prueba con esto
if( $('#list-div li').length === 0){ $( "#delete" ).hide(); $("#close-delete").hide(); }
Código aquí: