Question

我是新来的，我被困在我的项目中......

我需要在电子商务中排除购物车中的商品...

此购物车显示在Fancybox的iframe中。

它有效，但在Chrome中可视，但它没有。在Firefox和IE中它工作得很好......

我的div中的项目名为div_1，div_2，div_3 ......

<div id="div_1">
   content...
</div>
<div id="div_2>
   content...
</div>
<div id="div_3>
   content...
</div>

要滚动页面，我将所有内容放在带有样式的主div中。

style="overflow: hidden; width:820px; height:auto;"

因为滚动由iframe（自动）和我的主div控制，所以定义了widht的值，而height是自动适合我的内容......

在div中，我有一个来自产品，名称，价格的img和一个带有这个JS的删除按钮： -

onClick="removeItem(<%=arrayIndexdiv%>)"

功能： -

<script>
    function removeItem( itemid ) {
        document.getElementById('div_' + itemid ).innerHTML = "";
    }
</script>

换句话说，功能只是擦除div，将它们从页面中排除......

当我的列表显示大于iframe大小时，会出现垂直滚动条。

当我点击删除时，iten就是gonne，在所有的棕色内容中，但是在Chrome中，iframe的大小没有变化，我的所有项目上方都有一个空白区域，在页脚之前。

在IE和Mozilla中没关系，空间没有显示，但在Chrome中它就在那里......

我不知道我是否可以在此处提供更多帮助？如果可以，请告诉我！

任何人都可以帮助我吗？

对不起我的英文！

谢谢你们！

Answer 1

我相信你的问题是，由于div标签是块元素，它们仍占用父div中的空间。像这样：

var element = document.getElementById("div_" + itemid); 
element.parentNode.removeChild(element);

此外，这个动作在jquery中有点清晰。您可能希望查看它以进行进一步的DOM操作。

Answer 2

我相信您要删除DOM中的元素，而不仅仅是覆盖div的内容。

innerHTML属性设置或获取描述元素后代的HTML语法。在您的情况下，您只需设置div内容：

document.getElementById('div_' + itemid ).innerHTML = "";

如果您要从DOM删除元素：

function removeItem( itemid ) {
  var element = document.getElementById('div_' + itemid ); // will return element
  element.parentNode.removeChild(element); // will remove the element from DOM
}

同样style="overflow: hidden; width:820px; height:auto;"会隐藏溢出的div，但不会滚动它。

如果您想滚动它，可以设置overflow:scroll。

在JavaScript中通过innerHTML从列表中删除项目

2 个答案: