jQuery append Не работает в Double HTML

Question

У меня есть код с двумя шагами. Следующее утверждение:

Шаг 1: Если <span id="test"></span> нет текста, то id='parent' будут удалены с этим кодом $("#parent").Remove();

Шаг 2: Если id="container" нет текста, то id="container" будет автоматически генерировать текст NO DATA с этим кодом $("#container").append("NO DATA");

At Atep 1 хорошо работает. Но на этом шаге 2 не работает. Мне также пришлось заменить append() на html() и не получилось работать. Какое решение?

Мои коды:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

<div id='container'> 

<div id='parent'> 
<b>Age:</b> <span id='test'></span> 
</div> 

</div> 

<script> 
if($("#test").html()==""){ 
$("#parent").remove(); 
} 

if($("#container").html()==""){ 
$("#container").append("NO DATA"); 
} 
</script> 

Answer 1

Там же пробелы осталось в контейнере, так html() не опустошить вам нужно использовать $.trim() для удаления левого пробельные. Вот jsFIddle для вас.

if($("#test").html()==""){ 
 
$("#parent").remove(); 
 
} 
 
if($.trim($("#container").html())==""){ 
 
$("#container").append("NO DATA"); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id='container'> 
 

 
<div id='parent'> 
 
<b>Age:</b> <span id='test'></span> 
 
</div> 
 

 
</div>