Javascript 如何在引导网格中动态删除列？

我有一个带有bootstrap3的网页。在这个网页中，我有一个

行

。在那一行中，我总是想显示三个项目。然而，我真的有10项

当用户单击“删除”按钮时，我想删除一个项目，并使下一个项目滑入。但是，我一直无法在引导

行的上下文中理解如何做到这一点。目前，我的项目如下所示：

<div class="row">
  <div class="col-xs-4">
    <div id="panel1" class="panel panel-default">
      <div class="panel-heading" style="background-color:#43258A; color:#fff;">Item #1</div>
      <div class="panel-body">
        Item #1 Details
      </div>
    </div>  
  </div>

  <div class="col-xs-4">
    <div id="panel2" class="panel panel-default">
      <div class="panel-heading" style="background-color:#249B73;">Item #2</div>
      <div class="panel-body">
        Item #2 Details
      </div>
    </div>  
  </div>

  <div class="col-xs-4">
    <div id="panel3" class="panel panel-default">
      <div class="panel-heading" style="background-color:#FFF635;">Item #3</div>
      <div class="panel-body">
        Item #3 Details
      </div>
    </div>  
  </div>

  <div class="col-xs-4">
    <div id="panel4" class="panel panel-default">
      <div class="panel-heading" style="background-color:#FE6E18;">Item #4</div>
      <div class="panel-body">
        Item #4 Details
      </div>
    </div>  
  </div>

  <div class="col-xs-4">
    <div id="panel5" class="panel panel-default">
      <div class="panel-heading" style="background-color:#F91721;">Item #5</div>
      <div class="panel-body">
        Item #5 Details
      </div>
    </div>  
  </div>

  <div class="col-xs-4">
    <div id="panel6" class="panel panel-default">
      <div class="panel-heading" style="background-color:#1BA8CE;">Item #6</div>
      <div class="panel-body">
        Item #6 Details
      </div>
    </div>  
  </div>

  <div class="col-xs-4">
    <div id="panel7" class="panel panel-default">
      <div class="panel-heading" style="background-color:#9B3B24; color:#fff;">Item #7</div>
      <div class="panel-body">
        Item #7 Details
      </div>
    </div>  
  </div>

  <div class="col-xs-4">
    <div id="panel8" class="panel panel-default">
      <div class="panel-heading" style="background-color:#0A4E38; color:#fff;">Item #8</div>
      <div class="panel-body">
        Item #8 Details
      </div>
    </div>  
  </div>

  <div class="col-xs-4">
    <div id="panel9" class="panel panel-default">
      <div class="panel-heading" style="background-color:#7BE7C3;">Item #9</div>
      <div class="panel-body">
        Item #9 Details
      </div>
    </div>  
  </div>

  <div class="col-xs-4">
    <div id="panel10" class="panel panel-default">
      <div class="panel-heading" style="background-color:#E7B22A;">Item #10</div>
      <div class="panel-body">
        Item #10 Details
      </div>
    </div>  
  </div>
</div>

<div class="row">
  <div class="col-xs-4">
    <button class="btn btn-default" onclick="removeFirst()">
    Remove This
    </button>
  </div>

  <div class="col-xs-4">
    <button class="btn btn-default" onclick="removeSecond()">
    Remove This
    </button>
  </div>

  <div class="col-xs-4">
    <button class="btn btn-default" onclick="removeThird()">
    Remove This
    </button>
  </div>
</div>

问题是，当项目被移除时，我无法让项目向左滑动。此外，项目会自动换行，而不只是隐藏在第一行之外。我创建了一个小提琴来显示代码的运行。
添加parent（）方法来隐藏整个引导列

$(panelId).parent().fadeOut({
   duration:500
});


要获得要隐藏的额外伪项目行，可能必须在父行上设置最大高度并隐藏溢出：

.row.some-class {
    max-height: 110px;
    overflow: hidden;
}


这里的缺点是，您必须拥有永远不会改变高度的项目，并且您必须使用媒体查询来解释由于文本换行等原因导致高度改变的情况。您最好使用众多jQuery滑块中的一个
 您需要淡出另一个答案中提到的父项（）。此外，还需要再添加一个包装
，以便水平滚动对齐的框。这个div致力于与水平排列的一组盒子一样宽。我用牛皮重新涂了淡出色，看起来好多了。
.row
还有其他css属性：

.row {
  overflow:hidden;
  height: auto;
}

这是一个片段


var visiblePanels=[1,2,3,4,5,6,7,8,9,10]；
$（“.frm”）.width（$（“.row”）.width（）*visiblePanels.length/2.5）；
$（“.frm>div”）.width（$（.row”）.width（）/3.4）；
$（窗口）。调整大小（函数（）{
$（“.frm>div”）.width（$（.row”）.width（）/3.4；}）；
函数removeFirst（）{
var panelId='#panel'+visiblePanels[0]；
$（panelId）.parent（）.hide({
持续时间：500
});
可视面板。拼接（0,1）；
}
函数removessecond（）{
变量panelId='#panel'+可视面板[1]；
$（panelId）.parent（）.hide({
持续时间：500
});
可视面板.拼接（1,1）；
}
函数removeThird（）{
变量panelId='#panel'+可视面板[2]；
$（panelId）.parent（）.hide({
持续时间：500
});
可视面板.拼接（2,1）；
}
.row{
溢出：隐藏；
高度：自动；
}

项目#1
项目#1详细信息
项目#2
第2项详情
项目#3
项目#3详细信息
项目4
第4项详情
项目#5
项目#5详细信息
项目#6
第6项详情
项目7
第7项详情
项目8
第8项详情
项目9
第9项详情
项目#10
项目#10详细信息
去掉这个
去掉这个
去掉这个
使用
.frm
元素时发生了什么？你可能应该在你的答案中提到这一点，因为它似乎是解决方案的关键组成部分。对不起，我在你的答案上踩了个遍。：）根据需要进行编辑。
.row {
  overflow:hidden;
  height: auto;
}