Html 对象不支持属性或方法“删除”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18919560/
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
Object doesn't support property or method 'remove'
提问by Bryan Gould
I know there is some issue with get document.getElementByIdand IE, but not sure why IE is having a problem with .removeand all other browsers are not. Any help here would be appreciated. I am getting the error
我知道 getdocument.getElementById和 IE存在一些问题，但不确定为什么 IE 有问题.remove而所有其他浏览器都没有。任何帮助在这里将不胜感激。我收到错误
SCRIPT438: Object doesn't support property or method 'remove'
from the error console. The Javascript works in all other browsers.
Here is the code:
从错误控制台。Javascript 适用于所有其他浏览器。
这是代码：
<script type="text/javascript"><!--
function removeModule() {
<?php $tab = 1; ?>
var module_row = <?php echo $module_row; ?>;
if(!confirm('Are you sure?'))
{
return false;
}
var x = 1;
while (x < module_row)
{
if (document.getElementById('tab-' + x).checked)
{
document.getElementById('tab-' + x).remove();
document.getElementById('module-' + x).remove();
document.getElementById('tab-module-' + x).remove();
}
x++;
<?php $tab++; ?>
}
$('#form').submit();
}
//--></script>
This is from an opencart module, it is the tpl file. I've included part of the file here as well so hopefully someone can spot whatever the error is.
这是来自一个 opencart 模块，它是 tpl 文件。我也在这里包含了文件的一部分，所以希望有人能发现错误所在。
<?php echo $header; ?>
<div id="content">
<div class="breadcrumb">
<?php foreach ($breadcrumbs as $breadcrumb) { ?>
<?php echo $breadcrumb['separator']; ?><a href="<?php echo $breadcrumb['href']; ?>"><?php echo $breadcrumb['text']; ?></a>
<?php } ?>
</div>
<?php if ($error_warning) { ?>
<div class="warning"><?php echo $error_warning; ?></div>
<?php } ?>
<div class="box">
<div class="heading">
<h1><img src="view/image/module.png" alt="" /> <?php echo $heading_title; ?></h1>
<div class="buttons">
<a onclick="$('#form').submit();" class="button"><?php echo $button_save; ?></a>
<a onclick="removeModule();" class="button"><?php echo $button_delete ?></a>
<a onclick="location = '<?php echo $cancel; ?>';" class="button"><?php echo $button_cancel; ?></a></div>
</div>
<div class="content">
<form action="<?php echo $action; ?>" method="post" enctype="multipart/form-data" id="form">
<div class="vtabsQS">
<?php $module_row = 1; ?>
<?php foreach ($modules as $module)
{ ?>
<div style="margin-left: -7px; float:left;">
<input type="checkbox" style="float: left; margin-top: 8px;" id="tab-<?php echo $module_row; ?>" onClick="" value="#tab-<?php echo $module_row; ?>" />
<a href="#tab-module-<?php echo $module_row; ?>" id="module-<?php echo $module_row; ?>">
<?php foreach ($languages as $language)
{ ?>
<label class="inputLrgTab"><?php if (!empty($module['language_id'][$language['language_id']])) { echo $module['language_id'][$language['language_id']];} ?></label>
<?php } ?>
</a><br />
</div>
<?php $module_row++; ?>
<?php } ?>
<span id="module-add" style="clear: both; margin-left: -7px;"><?php echo $button_add_module; ?> <img src="view/image/add.png" alt="" onclick="addModule();" /></span>
</div>
<?php $module_row = 1; ?>
<?php foreach ($modules as $module) { ?>
<div id="tab-module-<?php echo $module_row; ?>" class="vtabs-content" style="margin-left:230px;">
<table class="form">
<tr>
<td><?php echo $entry_title; ?></td>
<td class="left">
<?php foreach ($languages as $language) { ?>
<img src="view/image/flags/<?php echo $language['image']; ?>" alt="<?php echo $language['name']; ?>" />
<input class="inputLrg" type="text" name="<?php echo $classname; ?>_module[<?php echo $module_row; ?>][language_id][<?php echo $language['language_id']; ?>]" value="<?php if (!empty($module['language_id'][$language['language_id']])) { echo $module['language_id'][$language['language_id']];} ?>">
<br />
<?php } ?>
<span class="error"><?php echo $error_title; ?></span>
</td>
</tr>
<tr>
<td><?php echo $entry_limit; ?></td>
回答by Christoph
remove()as a method on HTMLElements unfortunately is not supported by Internet Explorer.
remove()不幸的是，Internet Explorer 不支持HTMLElements 上的方法。
You could use the workaround in this SO answerfor a vanilla javascript solution.
您可以使用此 SO 答案中的解决方法来获取 vanilla javascript 解决方案。
However as you already seem to use jQuery, instead replace
但是，由于您似乎已经在使用 jQuery，因此请替换
document.getElementById('tab-' + x).remove();
with
和
$('#tab-' + x).remove();
回答by Joshua
You should get the parent of the element you are trying to remove and use the remove child method to find and remove the element
您应该获取要删除的元素的父元素，并使用 remove child 方法查找和删除元素
element.parentNode.removeChild(element);
this works in all browsers including IE.
这适用于包括 IE 在内的所有浏览器。
回答by Ravinder Payal
You should use this
你应该用这个
element.parentElement.removeChild(element);
Supported by all browser and also have some benefits over just a hack to remove child element.
受所有浏览器支持，并且与仅删除子元素的黑客相比也有一些好处。
Here is another workaround for keep using .remove()function
这是继续使用.remove()功能的另一种解决方法
Element.prototype.remove = function() {
this.parentElement.removeChild(this);
}
NodeList.prototype.remove = HTMLCollection.prototype.remove = function() {
for(var i = this.length - 1; i >= 0; i--) {
if(this[i] && this[i].parentElement) {
this[i].parentElement.removeChild(this[i]);
}
}
}
And then you can remove elements like this
然后你可以删除这样的元素
document.getElementById("my-element").remove();
or
或者
document.getElementsByClassName("my-elements").remove();
Here is Stack Overflow link for further info also source of this answer.
回答by repzero
It appears that IE10 also throws this error..
看来IE10也抛出这个错误..
Here one way I tried using the objects outerHTMLproperty:
这是我尝试使用 objectsouterHTML属性的一种方法：
if(typeof document.getElementById('id').remove=='function'){
//If support is found
document.getElementById('id').remove()
}
else{
//If not
document.getElementById('id').outerHTML='';
}
