如何使用jQuery删除无内容的.owl-item父元素

没问题，这有两种实用的方案帮你移除那些没有子元素的.owl-item容器，只保留带有.item子元素的项：

1. 原生JavaScript方案 #

如果你不想依赖第三方库，用原生JS就能轻松实现需求：

// 获取所有.owl-item元素
const owlItems = document.querySelectorAll('.owl-item');

// 遍历每个元素并检查是否为空
owlItems.forEach(item => {
  // 同时判断：没有子元素 或者 内容仅包含空白字符（避免空格导致的误判）
  if (item.children.length === 0 || item.textContent.trim() === '') {
    item.remove();
  }
});

简单说明： #

• 先通过querySelectorAll选中页面上所有目标元素
• 遍历过程中，双重判断确保把真正的空容器（包括看似空但有空格的情况）都筛选出来
• 符合条件的元素直接调用remove()方法删除

2. jQuery方案 #

如果你的项目已经引入了jQuery，代码会更简洁直观：

$('.owl-item').filter(function() {
  // 筛选出没有子元素或内容为空的项
  return $(this).children().length === 0 || $.trim($(this).text()) === '';
}).remove();

简单说明： #

• 用filter()方法精准筛选出需要删除的空容器
• 链式调用remove()直接删除筛选结果，一步完成操作

执行任意一种方案后，页面上就只会保留包含.item子元素的.owl-item容器了。

内容的提问来源于stack exchange，提问作者priMo-ex3m