使用jQuery刪除動態加載的內容

Question

我想刪除一些通過get_template_part（）;與wordpress循環一起添加的div元素。

結構是這樣的：

<div id="level1" class="col-0-1 noPad">
    get_template_part('new-story');   
</div>

為了簡化可讀性，我已經刪除了大部分循環。

模板部分的結構如下：

<div class="col-OuterContainer noPad">
  stuff
</div>

因此，實際上它看起來像這樣：

 <div id="level1" class="col-0-1 noPad">
    <div class="col-OuterContainer noPad">
      stuff
    </div>  
</div>

我想檢測是否有兩個以上名為“ col-OuterContainer”的divz，然后在此之后刪除divz。 我認為這很簡單，並嘗試了以下方法：

var num = $('.col-OuterContainer').length;
if (num > 2) {
   $('#level1>div:gt(1)').remove();
}

目前，我目前有3個帖子，因此應該刪除第三個帖子，但還沒有。 我得到的console.log為3，所以它顯然知道那里有3個元素，所以為什么不刪除第三個元素呢？

更新：所以我在代碼方面做了更多的嘗試。

wp循環仍然相同：

 <div id="level1" class="col-0-1 noPad">
        get_template_part('new-story');   
    </div>

get_template_part中的代碼是這樣的：

<div class="col-OuterContainer noPad"><div>stuff 1</div></div>

JS是這樣的：

jQuery(document).ready(function($){ 
console.log( $('.col-OuterContainer').length );
$('#level1 .noPad:gt(1)').remove();     
});

我得到以下輸出：

<div id="level1" class="col-0-1 noPad">
<div class="col-OuterContainer noPad"><div>stuff 1</div></div>
<div class="col-OuterContainer noPad"><div>stuff 1</div></div>
<div class="col-OuterContainer noPad"><div>stuff 1</div></div>
</div>

控制台顯示3個元素，但是即使我定位到noPad或.col-OuterContainer也不會刪除第三個元素。

Answer 1

調整選擇器

修改jQuery選擇器以：

<script>
    $('#level1 .noPad:gt(1)').remove();
       //Or 
    $(document).find('#level1 .noPad:qt(1)').remove();
</script>

小提琴 ： http : //jsfiddle.net/K5Q3B/6/

在引入更多<div>之前，您的前一個選擇器失敗之后對此進行了調整（請參見示例Fiddle ）。 或者，您可以嘗試此人在另一個SO問題中提出的建議：

<script>
   $('#level1 .noPad').slice(3).remove();
</script>

---

刪除動態加載的<div>的

<script>
    $.ajax({
       .. //Other Opts
       success: function( data ) {
          $('#somediv').html( data );
          var NodesToRemove = $(document).find('#level1 > div:gt(1)'); 
          //Or $('#somediv').find('#level1 .noPad:qt(1)').remove(); 
          NodesToRemove.remove();
       });
    });
</script>

---

PHP中的預防：

就像其他評論中提到的那樣，最好在PHP中阻止它-那么您根本不需要考慮使用任何JavaScript來刪除任何<div> ，

$Counter = 0;
if ( have_posts() ) {
    while ( have_posts() ) {
       $Counter++;
       the_post(); 
       if ( $Counter <= 2 )
           get_template_part('new-story'); 
    } 
} 

此外，您可以重寫PHP以使其具有AJAX條件，

$Counter = 0;
$isAjax = ( isset( $_GET["ajax"] ) && $_GET["ajax"] == 'true' ? true : false );
if ( have_posts() ) {
    while ( have_posts() ) {
       $Counter++;
       the_post(); 
       if ( !$isAjax || ( $isAjax && $Counter <= 2 ))
           get_template_part('new-story'); 
    } 
} 

Answer 2

var num = $('.col-OuterContainer').length;

這將為您提供整個文檔中類col-OuterContainer的div數量。

$('#level1>div:gt(1)') { ...

該選擇器僅計算div ，它們是#level1節點的直接子#level1 。

您在頁面上的其他位置是否具有.col-OuterContainer ，或嵌套在#level1節點的更深處？