如果下一個div為空，如何刪除上一個div？

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();

小提琴的例子

Answer 2

這應該可以解決您的問題：

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

Answer 3

首先-您的標記是錯誤的，您在許多類名的開頭都缺少右引號" 。

這是一些普通的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

您可以使用更多簡潔的選項，但是我覺得對於初學者來說，這很容易理解並包羅萬象。