Javascript 对象没有';t支持属性或方法';拆下';
我知道getJavascript 对象没有';t支持属性或方法';拆下';,javascript,html,internet-explorer,Javascript,Html,Internet Explorer,我知道getdocument.getElementById和IE存在一些问题,但不确定IE在方面存在问题的原因。删除和所有其他浏览器都没有问题。这里的任何帮助都将不胜感激。我发现了错误 SCRIPT438: Object doesn't support property or method 'remove' 从错误控制台。Javascript可以在所有其他浏览器中工作。 代码如下: <script type="text/javascript"><!-- function re
document.getElementById
和IE存在一些问题,但不确定IE在方面存在问题的原因。删除和所有其他浏览器都没有问题。这里的任何帮助都将不胜感激。我发现了错误
SCRIPT438: Object doesn't support property or method 'remove'
从错误控制台。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>
这是一个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>
" />
不幸的是,作为HTMLElements上的一种方法
您可以将中的解决方案用于普通javascript解决方案
但是,由于您似乎已经在使用jQuery,因此请替换
document.getElementById('tab-' + x).remove();
与
IE10似乎也抛出了这个错误
这里是我尝试使用objectsouterHTML
属性的一种方法:
if(typeof document.getElementById('id').remove=='function'){
//If support is found
document.getElementById('id').remove()
}
else{
//If not
document.getElementById('id').outerHTML='';
}
你应该用这个
element.parentElement.removeChild(element);
受所有浏览器的支持,并且与黑客攻击相比也有一些好处
删除子元素
这里有另一个解决方法,可以继续使用.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]);
}
}
}
然后你可以删除像这样的元素
document.getElementById("my-element").remove();
或
您应该获取要删除的元素的父元素,并使用remove child方法查找并删除该元素
element.parentNode.removeChild(element);
这适用于所有浏览器,包括IE。您可以使用remove()方法:
IE IE10中不支持它,如果使用.remove(),则会出现严重错误。我很惊讶这个版本相当现代,而且不支持这个版本!请参阅下面的纯香草javascript解决方案,并将其替换为:$('#tab-'+x)。remove();$('#module-'+x)。remove();$('#tab module-'+x)。remove();现在它成功了!@Bryan不客气。如果这对您有效,您可以将此答案标记为解决方案,以便所有人都知道您的问题已经解决。在IE11中,parentElement为空,但parentNode(如下所示)很好。谢谢!这应该被认为是最好的答案,因为它速度快,不使用任何其他库,也不搜索文档树。感谢@dean的反馈非常优雅、干净和普通。与使用jQuery的公认答案相比,我更喜欢这个答案。这种普通Javascript更干净。
document.getElementsByClassName("my-elements").remove();
element.parentNode.removeChild(element);
(function (arr) {
arr.forEach(function (item) {
if (item.hasOwnProperty('remove')) {
return;
}
Object.defineProperty(item, 'remove', {
configurable: true,
enumerable: true,
writable: true,
value: function remove() {
this.parentNode.removeChild(this);
}
});
});
})([Element.prototype, CharacterData.prototype, DocumentType.prototype]);