在 JavaScript 中通过 innerHTML 从列表中删除项目
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18885300/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Remove items from a list by innerHTML in JavaScript
提问by user2793679
I'm new here and I'm stuck in my project...
我是新来的，我被困在我的项目中......
I need exclude items from a cart on an ecommerce...
我需要从电子商务的购物车中排除项目...
This cart is showed inside a iframe from Fancybox.
该购物车显示在 Fancybox 的 iframe 内。
It works, but visually in Chrome, it doesn't. In Firefox and IE it's work fine...
它可以工作，但在 Chrome 中从视觉上看，它没有。在 Firefox 和 IE 中它工作正常......
I have my items in divs named like div_1, div_2, div_3...
我在 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>
To scroll the page, I put all content inside a main div with style.
为了滚动页面，我将所有内容放在一个带有样式的主 div 中。
style="overflow: hidden; width:820px; height:auto;"
Because the scroll is controled by the iframe(auto) and my main div there is defined value of widht, and height is auto to fit with my content...
因为滚动是由 iframe(auto) 和我的主 div 控制的，所以定义了宽度值，高度是自动以适应我的内容......
Inside the divs, I have a img from product, name, price and a remove button with this JS:-
在 div 中，我有一个来自产品、名称、价格的 img 和一个带有这个 JS 的删除按钮：-
onClick="removeItem(<%=arrayIndexdiv%>)"
And the function:-
和功能： -
<script>
function removeItem( itemid ) {
document.getElementById('div_' + itemid ).innerHTML = "";
}
</script>
In other words, the funcion simply erase the div, excluding them from the page...
换句话说，函数只是擦除 div，将它们从页面中排除...
When my list itens is bigger than the iframe size, the vert scrollbar appears.
当我的列表 itens 大于 iframe 大小时，会出现垂直滚动条。
When I click on remove, the iten is gonne corretly, in all brownsers, but in Chrome, the size of iframe not change, and I have a blank space above all my items, before the footer.
当我点击删除时，在所有的棕色浏览器中都正确地显示了 iten，但在 Chrome 中，iframe 的大小没有改变，并且我的所有项目上方都有一个空白区域，在页脚之前。
In IE and Mozilla it's ok, the space doesn't appears, but in Chrome it is there...
在 IE 和 Mozilla 中没问题，空间没有出现，但在 Chrome 中它在那里......
I don't know if I can put here the URL to help more? If I can, please tell me!
不知道能不能把网址放在这里以帮助更多？如果可以，请告诉我！
Can anyone help me?
谁能帮我？
Sorry my english!
对不起我的英语！
Thank you GUYS!
感谢你们！
采纳答案by Dipak Ingole
I believe you you want to remove the element from the DOMnot just override the content of div.
我相信你，你想从删除的元素DOM不只是覆盖的内容div。
The innerHTMLproperty sets or gets the HTML syntax describing the element's descendants.
In your case you are just setting the divcontent:
该innerHTML属性设置或获取描述元素后代的 HTML 语法。在您的情况下，您只是设置div内容：
document.getElementById('div_' + itemid ).innerHTML = "";
If you want to remove element from DOM:
如果要从中删除元素DOM：
function removeItem( itemid ) {
var element = document.getElementById('div_' + itemid ); // will return element
element.parentNode.removeChild(element); // will remove the element from DOM
}
Also style="overflow: hidden; width:820px; height:auto;"will hide the overflowing divbut will not scroll it.
也style="overflow: hidden; width:820px; height:auto;"将隐藏溢出div但不会滚动它。
If you want it to scroll you can set overflow:scroll.
如果你想让它滚动，你可以设置overflow:scroll.
回答by Feussy
I believe your issue is that since div tags are block elements, they are still taking up space in the parent div. Like so:
我相信你的问题是因为 div 标签是块元素，它们仍然占用父 div 中的空间。像这样：
var element = document.getElementById("div_" + itemid);
element.parentNode.removeChild(element);
Also, this action is a little cleaner in jquery. You may want to look into it for further DOM operations.
此外，这个动作在 jquery 中更简洁一些。您可能需要查看它以进行进一步的 DOM 操作。
