Question

我有一个基于对问题的回答添加div容器的过程。用户可以选择在任何时候重新开始。我希望在用户执行此操作后的某个点之后删除所有容器。例如，以下是您在3个回复后会看到的内容。

<div id="SolutionAdvisor">
    <div id="Col1"><div class="content">some content here</div></div>
    <div id="Col2"><div class="content">some content here</div></div>
    <div id="Col3"><div class="content">some content here</div></div> 
 </div>

如果用户决定回到问题2，那么我希望看到：

  <div id="SolutionAdvisor">
    <div id="Col1"><div class="content">some content here</div></div>
    <div id="Col2"><div class="content">some content here</div></div> 
 </div>

我尝试过使用：gt索引，如下所示：

     $('#SolutionAdvisor div:gt('+column+')').remove();

也尝试过：

     $('#SolutionAdvisor div:gt('+column+')').each(function(){$(this).remove();});

其中列为1。

我所看到的是这样的事情：

 <div id="SolutionAdvisor">
    <div id="Col1"><div class="content">some content here</div></div>
    <div id="Col2"><div class="content">some content here</div></div>
    <div id="Col2"><div class="content">some content here</div></div> 
 </div>

这样做的正确方法是什么？

Answer 1

您可以将父div中的子项列表作为html元素数组。然后，将每个包装在jQuery调用中并按如下方式删除它们：

var maxQuestions = 2;

 children = $('#SolutionAdvisor').children();
 for (var i = maxQuestions; i < children.length; i++) {
     $(children[i]).remove();
 }

小提琴：http://jsfiddle.net/stevenmtwhunt/YQusg/2/

使用jQuery选择器也有一些很酷的方法，我只是喜欢for循环的概念简单。

Answer 2

您应该使用直接后代选择器，如：

$('#SolutionAdvisor > div:gt(?)).remove():

另请注意，传递给gt()的值为零索引。

此外，您可能希望对这些div进行分类，以便您可以直接访问它们，如：

$('.responses:gt(?)').remove();

Answer 3

这是使用.nextAll（）方法捕获输入值之后的所有元素的最佳方案..

$('#txt1').on('change' , function() {
        var quesNo = $(this).val();    
        $('#SolutionAdvisor div:nth-child('+quesNo+')').nextAll().remove();        
    });

检查FIDDLE此处

在jquery中的某个位置之后删除所有容器

3 个答案: