使用JavaScript的innerHTML从列表中删除项目

Question

使用JavaScript的innerHTML从列表中删除项目

javascripthtmliframeasp-classic

3

我是新来的，我的项目卡住了...

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

这个购物车显示在一个来自Fancybox的iframe中。

它能工作，但在Chrome中外观不行。在Firefox和IE中它能正常工作...

我的物品被命名为像div_1、div_2、div_3这样的div。

<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已定义宽度值，高度为自适应以适应我的内容...

在div中，我有一个产品图片、名称、价格和一个带有此JS的删除按钮：

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

函数：

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

换句话说，这个函数仅仅删除div，将其从页面中排除...

当我的列表项比iframe大小大时，垂直滚动条会出现。

当我点击删除时，所有浏览器都成功删除了该项，但在Chrome中，iframe的大小没有改变，而且在页脚之前有一个空白区域。

在IE和Mozilla中，这没问题，空间不会出现，但在Chrome中会出现...

我不知道是否可以在这里提供URL以获取更多帮助？如果可以，请告诉我！

有人能帮帮我吗？

对不起，我的英语不好！

谢谢大家！

- user2793679

如果您想让这个div可滚动，也不应该使用overflow: hidden。请改用overflow: scroll。 - Shalom Aleichem

好的，我已经编辑了...现在是正确的了，抱歉！顺便说一下，我使用overflow:scroll但在任何浏览器中都没有改变任何内容！ - user2793679

1

将innerHTML设置为""并不会删除元素本身，只会删除其内容。 - RobG

我认为这是Chrome的一个bug，因为如果我只是点击iframe的任何区域（不一定是REMOVE），滚动条就会被调整到更大……非常奇怪！ - user2793679

@user2793679，你能提供一个Fiddle吗？它如何调整大小？ - Deepak Ingole

显示剩余3条评论

2个回答

1

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

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

此外，在 jQuery 中，这个动作更加简洁。你可能需要查看它以进行进一步的 DOM 操作。

- Feussy

这很有趣吗？就像我对上面的朋友说的那样，我忘了提到div的id，但它们确实存在，只是在这里我忘了。我如何将您的示例应用于实践中？ - user2793679

它也起作用了，看起来更简洁，但问题仍然存在...我相信这是Chrome的一个bug，因为如果我只是单击iframe的任何区域（不必在REMOVE中），滚动条就会调整到更大...非常奇怪！ - user2793679

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Deepak Ingole · Accepted Answer

我相信你想从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。