如何檢查元素的內容是否爲空，如果是這樣，刪除jquery中的元素

Question

我目前正試圖選擇某個div中沒有​​內容並將其刪除的任何h2元素。這是我的html代碼：

<div class="skipToContainer"> 
    <h2 class="vidSkipTo">Hello </h2> 
    <h2 class="vidSkipTo"></h2> 
    <h2 class="vidSkipTo"></h2> 
    <h2 class="vidSkipTo"></h2> 
</div> 

這些都是我試圖無濟於事一對夫婦的jQuery代碼：

jQuery(".skipToContainer .vidSkipTo").each (function() { 
    if (jQuery(this).text().trim() === '') 
     jQuery(this).remove(); 
} 

jQuery(".skipToContainer h2").each (function() { 
    if (jQuery(this).text().trim() === '') 
     jQuery(this).remove(); 
} 

jQuery(".skipToContainer h2").each (function() { 
    if (jQuery(this).text() === '') 
     jQuery(this).remove(); 
} 

有什麼建議？

注意：我在本地WordPress網站上進行這些測試。不知道這是否重要，只是爲了讓你知道。

Answer 1

嘗試

jQuery(".skipToContainer h2").filter(":empty").remove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
 
</script> 
 
<div class="skipToContainer"> 
 

 
      <h2 class="vidSkipTo">Hello </h2> 
 
      <h2 class="vidSkipTo"></h2> 
 
      <h2 class="vidSkipTo"></h2> 
 
      <h2 class="vidSkipTo"></h2> 
 

 
</div>

Answer 2

$('.skipToContainer > .vidSkipTo:empty').remove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="skipToContainer"> 
 
    <h2 class="vidSkipTo">Hello </h2> 
 
    <h2 class="vidSkipTo"></h2> 
 
    <h2 class="vidSkipTo"></h2> 
 
    <h2 class="vidSkipTo"></h2> 
 
</div>