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

Question

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

<span id="pill_filters>
  <button id="filterCreated">Filter name here</button>
  <button id="filterCreated2">Filter name here</button>
</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”类，即使如此，它仍然在显示。我究竟做错了什么？这不是 :empty 状态的工作方式吗？我可以用什么代替？我会非常感谢你的帮助！

标签： htmljqueryshow-hide

Answer 1

没有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";
  };
};