根据空状态显示和隐藏标签

Question

每次输入不同的输入时，我都会将几个按钮附加到 html span 标签中。

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

只要此 span 标签内有按钮，我也想显示一个标签，如果没有，我想隐藏该标签。

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

到目前为止我的jquery是

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

但是好像不行。该标签从一开始就已经有“d-none”class，即使如此，它仍然显示。我究竟做错了什么？这不是 :empty 状态的工作方式吗？我可以用什么代替？非常感谢你的帮助！

Answer 1

if 语句丢失 ()
.html.is无效jQuery

使用：

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

Answer 2

没有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

html

jquery

show-hide