简体   繁体   English

使用jQuery删除动态加载的内容

[英]Remove dynamically loaded content with jQuery

I want to remove some div elements that are added with a wordpress loop via a get_template_part();. 我想删除一些通过get_template_part();与wordpress循环一起添加的div元素。

The structure is something like this: 结构是这样的:

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

I've cut out most of the loop for readability. 为了简化可读性,我已经删除了大部分循环。

The template part is structured like this: 模板部分的结构如下:

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

So in practice it looks more like this: 因此,实际上它看起来像这样:

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

I want to detect whether there's more than 2 divz named "col-OuterContainer", then remove the divz there after. 我想检测是否有两个以上名为“ col-OuterContainer”的divz,然后在此之后删除divz。 I thought it was pretty straight forward and tried this: 我认为这很简单,并尝试了以下方法:

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

I currently have 3 posts at the moment so the third should have been removed, but it hasn't. 目前,我目前有3个帖子,因此应该删除第三个帖子,但还没有。 I'm getting a console.log of 3 so it obviously know there are 3 elements there so why is it not removing the third element? 我得到的console.log为3,所以它显然知道那里有3个元素,所以为什么不删除第三个元素呢?

Update: So I've played around some more with the code. 更新:所以我在代码方面做了更多的尝试。

The wp loop is still the same: wp循环仍然相同:

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

The code inside get_template_part is this: get_template_part中的代码是这样的:

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

The JS is this: JS是这样的:

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

I'm getting this output: 我得到以下输出:

<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>

Console shows 3 elements but won't remove the third element even if I target noPad or .col-OuterContainer. 控制台显示3个元素,但是即使我定位到noPad或.col-OuterContainer也不会删除第三个元素。

Adjusted Selector 调整选择器

Modify the jQuery selector to: 修改jQuery选择器以:

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

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

Adjusted this after your previous selector was failing when more <div> s were introduced (See example Fiddle ). 在引入更多<div>之前,您的前一个选择器失败之后对此进行了调整(请参见示例Fiddle )。 Alternatively, you could try what this person suggested in another SO Question : 或者,您可以尝试此人在另一个SO问题中提出的建议:

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

Removing Dynamically loaded <div> 's 删除动态加载的<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>

Prevention in PHP: PHP中的预防:

As others in the comments mentioned, it would be much better to prevent this in PHP - then you wouldn't need to consider any JavaScript for removing any of the <div> s at all, 就像其他评论中提到的那样,最好在PHP中阻止它-那么您根本不需要考虑使用任何JavaScript来删除任何<div>

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

Furthermore you could rewrite the PHP to have an AJAX Condition, 此外,您可以重写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'); 
    } 
} 
var num = $('.col-OuterContainer').length;

This will give you the number of div s with class col-OuterContainer in the whole document. 这将为您提供整个文档中类col-OuterContainerdiv数量。

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

This selector only counts div which are direct children of the #level1 node. 该选择器仅计算div ,它们是#level1节点的直接子#level1

Do you have .col-OuterContainer in other places on your page, or nested deeper inside your #level1 node ? 您在页面上的其他位置是否具有.col-OuterContainer ,或嵌套在#level1节点的更深处?

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM