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

Remove items from a list by innerHTML in JavaScript

本文关键字：列表 innerHTML 删除项目 JavaScript      更新时间：2023-09-26

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

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

这个购物车显示在Fancybox的iframe内。

它可以工作，但在Chrome中视觉上却不起作用。在火狐和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（auto） 控制的，而我的主要div 定义了 widht 的值，并且高度是自动的以适应我的内容......

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

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

和功能：-

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

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

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

当我单击删除时，iten 在所有棕色服务器中都是相应的，但在 Chrome 中，iframe 的大小不会改变，并且在页脚之前，我的所有项目上方都有一个空白区域。

在

IE和Mozilla中没关系，空间没有出现，但是在Chrome中它在那里......

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

谁能帮我？

对不起我的英语！

谢谢你们！

我相信

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

我相信

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

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

此外，此操作在jquery中更简洁一些。您可能需要研究它以进行进一步的 DOM 操作。

相关文章：