show and hide a label depending on empty state

Question

I am appending several buttons into an html span tag every time I type on different inputs.

<span id="pill_filters>
  <button id="filterCreated">Filter name here</button>
  <button id="filterCreated2">Filter name here</button>
</span>

I also wanna show a label whenever there are buttons inside of this span tag and if they aren't, I wanna hide said label.

<label id="label_sc">Search Criteria:</label>

So far my jquery is

function showSCLabel(){
  if ($("#pill_filters").html.is(':empty')){
     $("#label_sc").addClass("d-none");
  }else{
   $("#label_sc").removeClass("d-none");
  }
}

But it doesnt seem to work. The label already has "d-none" class since the beginning and even with that, it is still showing. What am I doing wrong? is this not how the :empty state works? what can I use instead? I'll appreciate a lot your help!

Does this answer your question? [How do I check if an HTML element is empty using jQuery?](https://stackoverflow.com/questions/6813227/how-do-i-check-if-an-html-element-is-empty-using-jquery) — StackSlave, Jun 22 '20 at 22:56

score 0 · Accepted Answer · answered Jun 22 '20 at 22:47

0

if statement is missing ()
.html.is is invalid jQuery

Use:

if ( $("#pill_filters").is(':empty') ) {

answered Jun 22 '20 at 22:47

Roko C. Buljan

196,159
39
305
313

Ah yes, I was missing the initial parenthesis, sorry. Let me correct, because, even with this, its still not working, sadly. – Falkirkh Jun 22 '20 at 23:31
ah, I did run everything again, and it worked just fine. hehe. my bad! – Falkirkh Jun 23 '20 at 17:48
@Falkirkh nice to hear you got this sorted – Roko C. Buljan Jun 23 '20 at 18:03

score 0 · Answer 2 · answered Jun 22 '20 at 23:58

Answer without jQuery:

//span
const span=document.getElementById("pill_filters");
//label
const label=document.getElementById("label-sc");

span.addEventListener('DOMSubtreeModified',function(){
  //if innerHTML is not ""
  if(span.innerHTML){
    //show label
    label.style.display="block";
  }else{
    //hide label
    label.style.display="none";
  };
};

show and hide a label depending on empty state

2 Answers2