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上显示第3个li元素项目符号，但想显示其他两个li项目符号。有什么办法可以解决这个问题？

谢谢阿米特（Amit）

Answer 1

您已经说过要创建元素。如果是这样，则只需忽略该li或在div为空的情况下将其应用于list-style: none的类。

如果是在事后这样做，则无需更改结构，添加类等，我想不出一个基于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元素，如果forEach中的文本为空，则在div循环内删除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>

有什么办法可以隐藏<li>元素的项目符号，该元素的div是否为空

5 个答案: