有没有办法隐藏<li>具有空div的元素的项目符号

Question

我正在动态生成li元素。一些 li 元素具有空div。喜欢

<ul class="mybuttons">
   <li class="mybutton"><div>kkk</div></li>
   <li class="mybutton"><div>llll</div></li>
   <li class="mybutton"><div></div></li>
</ul>

我不想在UI上显示第三个Li元素项目符号，但想显示另外两个Li项目符号。有什么办法可以解决这个问题吗？

谢谢阿米特

Answer 1

你说过你正在创建元素。如果是这样，则只需关闭该li或在设置list-style: none的div为空时对其应用一个类。

如果您在事后执行此操作，那么在不更改结构、添加类等的情况下，我想不出基于div 为空(而不是它始终是第三项，我确定这不是问题(的 CSS 解决方案。

JavaScript 解决方案很简单，但我不喜欢为此使用 JavaScript。

const items = document.querySelectorAll(".mybuttons li");
for (const item of items) {
  if (!item.textContent.trim()) {
    item.style.listStyle = "none";
  }
}

<ul class="mybuttons">
   <li class="mybutton"><div>kkk</div></li>
   <li class="mybutton"><div>llll</div></li>
   <li class="mybutton"><div></div></li>
</ul>

或仅使用 ES5

：

var items = document.querySelectorAll(".mybuttons li");
for (var n = 0; n < items.length; ++n) {
  if (!items[n].textContent.trim()) {
    items[n].style.listStyle = "none";
  }
}

<ul class="mybuttons">
   <li class="mybutton"><div>kkk</div></li>
   <li class="mybutton"><div>llll</div></li>
   <li class="mybutton"><div></div></li>
</ul>

---

我不应该使用上面的style.listStyle，我应该按照我在上面第一段中所说的去做并使用一个类：

const items = document.querySelectorAll(".mybuttons li");
for (const item of items) {
  if (!item.textContent.trim()) {
    item.classList.add("empty");
  }
}

.empty {
  list-style: none;
}

<ul class="mybuttons">
   <li class="mybutton"><div>kkk</div></li>
   <li class="mybutton"><div>llll</div></li>
   <li class="mybutton"><div></div></li>
</ul>

Answer 2

使用 querySelectorAll 选择所有li元素，如果div中的文本为空，则在 forEach 循环内删除list style。

var a=document.querySelectorAll('li');
a.forEach((e)=>{
if(e.childNodes[0].textContent=="")
e.style.listStyle='none';
})

<ul class="mybuttons" >
   <li class="mybutton"><div>kkk</div></li>
   <li class="mybutton"><div>llll</div></li>
   <li class="mybutton"><div></div></li>
   <li class="mybutton"><div>erere</div></li>
   <li class="mybutton"><div></div></li>
   <li class="mybutton"><div>rere</div></li>
</ul>

Answer 3

使用 JS：

{
 const init = () => {
  const btns = document.querySelectorAll(`.mybutton`);
  const allBtns = Array.from(btns);
  btns.forEach(btn => {
   if(btn.textContent === ''){
    btn.style.listStyle = 'none';
   }
  }
 }
 init();
}

这可能有效

Answer 4

只需检查 li 元素中的文本并最终将其删除：

let items = document.getElementsByTagName("li");
for (var i = 0; i < items.length; ++i) {
  let text = items[i].innerText;
  if(!text) items[i].remove();
}

<ul class="mybuttons">
   <li class="mybutton"><div>kkk</div></li>
   <li class="mybutton"><div>llll</div></li>
   <li class="mybutton"><div></div></li>
</ul>

Answer 5

是的。使用 list-style 属性并为其分配none。

<ul class="mybuttons">
   <li class="mybutton"><div>kkk</div></li>
   <li class="mybutton"><div>llll</div></li>
   <li class="mybutton" style="list-style: none;"><div>HHH</div></li>
</ul>