Question

我有下一个结构：

<div class="holder">

  <div class="item">
    <img class="popup_btn">
    <div class="popup_text>sometext_here</div>
  </div>

  <div class="item">
    <img class="popup_btn">
    <div class="popup_text>sometext_here</div>
  </div>

  <div class="item">
    <img class="popup_btn">
    <div class="popup_text>sometext_here</div>
  </div>

  <div class="item">
    <img class="popup_btn">
    <div class="popup_text></div>
  </div>

  <div class="item">
    <img class="popup_btn">
    <div class="popup_text></div>
  </div>

</div>

如果类“popup_text”旁边的元素里面没有内容，如何删除类“popup_btn”的图像？

Answer 1

您可以使用:empty选择器检索没有内容的元素。从那里你可以遍历DOM到remove()所需的元素。试试这个：

$('.popup_text:empty').prev('.popup_btn').remove();

或者，假设您要删除.item容器：

$('.popup_text:empty').closest('.item').remove();

Example fiddle

Answer 2

这可以解决您的问题：

$("div.popup_text").each(function () {
    var $el = $(this);
    if ($el.text() === "") {
        $el.siblings(".popup_btn").remove();
    }
});

Answer 3

首先关闭 - 您的标记错误，您错过了许多类名称的结束引用"。

这里有一些vanilla javaScript可以做你想要的，不需要库。

// select all the .item classes
var items = document.querySelectorAll('div.item');

// loop through them
for ( var i=0; i<items.length; i++ ) {
  // store the contents into variables
  var popup_text = items[i].querySelector('.popup_text'),
      popup_btn = items[i].querySelector('.popup_btn');

  // if the text length is 0, it's empty. remove the button img.
  if (popup_text.textContent.length === 0) {
    popup_btn.remove();
  }
}

示例：http://jsbin.com/logaximoke/edit?html,js,output

您可以使用更简洁的选项，但我觉得这对于初学者来说很容易理解和包装。

如果下一个div为空，如何删除前一个div？

3 个答案: