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

我想删除一些通过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>

我目前有3个帖子，所以第三个应该被删除，但是没有。我得到的console.log为3，所以它显然知道有3个元素，为什么不删除第三个元素

更新：所以我对代码进行了更多的研究。

wp循环仍然是相同的：

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

我得到这个输出：

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

材料1
材料1
材料1

Console显示3个元素，但即使我以noPad或.col OuterContainer为目标，也不会删除第三个元素。

将jQuery选择器修改为：

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

$（“#level1.noPad:gt（1）”.remove（）；
//或
$（文档）。查找（'#level1.noPad:qt（1）'）。删除（）；

小提琴：

当引入更多的

时，在上一个选择器失败后调整了此选项（请参阅）。或者，您可以尝试此人在另一本书中的建议：

$（'#level1.noPad'）。切片（3.remove（）；

---

删除动态加载的

$.ajax({
..//其他选项
成功：功能（数据）{
$（'#somediv'）.html（数据）；
var NodesToRemove=$（document.find（'level1>div:gt（1）'）；
//或者$（'somediv'）。查找（'level1.noPad:qt（1'）。删除（）；
NodesToRemove.remove（）；
});
});

---

PHP中的预防：

正如评论中提到的那样，在PHP中防止这种情况要好得多——那么，你根本不需要考虑任何JavaScript来删除任何<代码> <代码> s，

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

$Counter=0；
if（have_posts（））{
while（have_posts（））{
$Counter++；
_post（）；
如果计数器调整选择器
将jQuery选择器修改为：

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


$（“#level1.noPad:gt（1）”.remove（）；
//或
$（文档）。查找（'#level1.noPad:qt（1）'）。删除（）；

小提琴：

在上一个选择器出现故障后，当引入更多的
时，您已对此进行了调整（请参阅）。或者，您可以尝试此人在另一个选择器中的建议：


$（'#level1.noPad'）。切片（3.remove（）；


删除动态加载的


$.ajax({
..//其他选项
成功：功能（数据）{
$（'#somediv'）.html（数据）；
var NodesToRemove=$（document.find（'level1>div:gt（1）'）；
//或者$（'somediv'）。查找（'level1.noPad:qt（1'）。删除（）；
NodesToRemove.remove（）；
});
});


PHP中的预防：
正如评论中提到的那样，在PHP中防止这种情况要好得多——那么，你根本不需要考虑任何JavaScript来删除任何<代码> <代码> s，
$Counter = 0;
if ( have_posts() ) {
    while ( have_posts() ) {
       $Counter++;
       the_post(); 
       if ( $Counter <= 2 )
           get_template_part('new-story'); 
    } 
} 

$Counter=0；
if（have_posts（））{
while（have_posts（））{
$Counter++；
_post（）；
如果（$柜台
这将为您提供整个文档中类为
coloutercontainer
的
div
s的编号

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

此选择器仅统计
div
，它们是
#level1
节点的直接子节点

您是否在页面的其他位置有
.col OuterContainer
，或者在
#level1
节点中嵌套得更深

这将为您提供整个文档中类为
coloutercontainer
的
div
s的编号

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

此选择器仅统计
div
，它们是
#level1
节点的直接子节点

您是否在页面的其他位置有
.col OuterContainer
，或嵌套在
#level1
节点的更深处？
这是什么#level1>div:gt（1），level1是容器吗？是的，它是模板部分的容器。在这里工作正常：@KyleJoseph
get\u template\u part
是预处理的，因此它不太可能与Javascript之类的客户端进程冲突。您提到它在循环中-在PHP循环中放置计数条件而不是获取JS更有意义吗要完成繁重的工作？这是在doc ready上执行还是在AJAX获取之后执行？如果是一次性的doc ready，您将永远找不到新内容。可能绑定到
$。ajaxComplete
？这是什么#level1>div:gt（1），level1是容器吗？是的，它是模板部分的容器。在这里工作正常：@KyleJoseph
get\u template\u part
是预处理的，因此它不太可能与Javascript之类的客户端进程冲突。您提到它在循环中-在PHP循环中放置计数条件而不是获取JS更有意义吗要完成繁重的工作？这是在doc ready上执行还是在AJAX获取之后执行？如果它是doc ready上的一次性操作，您将永远找不到新内容。可能绑定到
$。ajaxComplete
？感谢Mackiee，我基本上有一个js函数，可以在调整窗口大小时检测媒体查询，我有一个类似的函数，使用AJAX加载以便我是html，所以我完全理解你的概念。在php中添加一个计数器会很好，如果这是我唯一的选择，我会这样做，但$（'#level1>div:gt（1）'）。remove（）；只是看起来简单多了。我只是有点困惑为什么它不起作用，而一个简单的console.log.length可以清楚地检测到3个元素。p.s我还应该澄清一下，在更大的屏幕宽度上，我使用一个wp循环来获取4个模板部分，然后我使用js来检测一个媒体查询，然后根据查询的内容，我会调整显然，如果我想要更多，我需要使用ajax/html方法，但是如果我想要更少，我只需要使用.remove js方法。我希望您能够了解它是什么=）特别是从一个牛津大学的家伙到另一个！顺便说一句！祝你好运=]！添加了一个建议，我发现到处挖掘，虽然你能找到它是什么吗？哇嘿！我
$Counter = 0;
if ( have_posts() ) {
    while ( have_posts() ) {
       $Counter++;
       the_post(); 
       if ( $Counter <= 2 )
           get_template_part('new-story'); 
    } 
} 

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

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