Check if element has no children with jquery

Question

I want to check if element has no children set parents element display:none property.

But my js is not working as expect where is my mistake ?

$(document).ready(function(){
  if (!$('#detay-main-carousel').children('.carousel-inner').length>1) {
     $('#detay-main-carousel').hide();
  }
});

<div id="detay-main-carousel" style="background:turquoise;">
  <div class="carousel-inner">
    This is the slider.....
  </div>
</div>

<div id="detay-main-carousel" style="background:yellow;">
    This is the slider.....
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 1

The id detay-main-carousel is duplicate.

Also ! ..children('.carousel-inner').length > 1 should be:

! ..children('.carousel-inner').length OR children('.carousel-inner').length < 1 OR children('.carousel-inner').length === 0

$(document).ready(function(){
  $('.detay-main-carousel').each(function () {
    if (!$(this).children('.carousel-inner').length) {
        $(this).hide();
    }
  })
});

<div class="detay-main-carousel" style="background:turquoise;">
  <div class="carousel-inner">
    This is the slider.....
  </div>
</div>

<div class="detay-main-carousel" style="background:yellow;">
    This is the slider.....
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

The ! operator has a higer precedence than >, so you should write it differently:

if ($('#detay-main-carousel').children('.carousel-inner').length<=1) {

which would be the exact opposite of the >1 check. But reading your question, you would want to test for no such children at all (excluding 1):

if ($('#detay-main-carousel').children('.carousel-inner').length == 0) {

Note that $('#detay-main-carousel') will only match the first occurrence since id values are supposed to be unique. Better replace your id values with classes, so they don't have to be unique.