如何删除不包含指定类名内部元素的HTML列表项？

原生JavaScript实现 #

直接通过原生DOM API即可完成需求，具体步骤如下：

• 选中所有带有listTree类的列表项
• 逐个检查每个列表项是否包含.draft或.redirect类的子元素
• 移除所有不满足条件的列表项

// 获取所有目标列表项
const listItems = document.querySelectorAll('.listTree');

listItems.forEach(item => {
  // 检查当前列表项内是否存在指定类的子元素
  const hasRequiredElement = item.querySelector('.draft, .redirect') !== null;
  // 无目标元素则移除当前列表项
  if (!hasRequiredElement) {
    item.remove();
  }
});

jQuery实现 #

如果项目已引入jQuery，可通过更简洁的选择器语法实现：

// 直接选中所有不包含目标子元素的列表项并移除
$('.listTree:not(:has(.draft), :has(.redirect))').remove();

说明 #

两种方案都会处理所有层级的.listTree列表项（包括嵌套在子<ul>内的元素），确保所有不包含.draft或.redirect的<li>都被移除。

内容的提问来源于stack exchange，提问作者Stangn99