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!

Answer 1

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

Use:

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