对象不支持属性或方法“删除”
Object doesn't support property or method 'remove'
我知道 get document.getElementById
和 IE 存在一些问题,但不确定为什么 IE 在 .remove
上出现问题,而所有其他浏览器都没有。这里的任何帮助将不胜感激。我收到错误
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>
您应该获取您尝试删除的元素的父级,并使用 remove 子方法来查找和删除该元素
element.parentNode.removeChild(element);
这适用于所有浏览器,包括 IE。
不幸的是,
Internet Explorer不支持remove()
您可以使用此 SO 答案中的解决方法来获取普通 JavaScript 解决方案。
但是,由于您似乎已经在使用 jQuery,因此请替换
document.getElementById('tab-' + x).remove();
跟
$('#tab-' + x).remove();
你应该使用这个
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();
或
document.getElementsByClassName("my-elements").remove();
这是堆栈溢出链接以获取更多信息,也是此答案的来源。
IE10似乎也抛出了这个错误。
在这里,我尝试使用对象outerHTML
属性的一种方式:
if(typeof document.getElementById('id').remove=='function'){
//If support is found
document.getElementById('id').remove()
}
else{
//If not
document.getElementById('id').outerHTML='';
}
你可以对 remove() 方法进行填充:
(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]);
相关文章:
- 从数组中删除元素的最佳方法是:javascript/jquery
- Es6:能够在设置/更新/删除对象属性时调用自定义方法
- 从数组JavaScript中删除并返回最后n个项的最快方法
- 在jquery中是否有任何方法或位置可以编写从Dom中删除页面后调用的方法
- 什么'是删除WinJS ListView中所有项目的最快方法
- 如何更改/删除同级方法
- 有没有更简洁的方法可以从带有 lodash 的数组中删除条目
- 使用 MVC 删除 JavaScript 中硬编码字符串 Asp.Net 最佳方法
- 使用 jQuery 从锚点中删除 href 的最干净方法
- 通过找到一种删除许多 if 语句的方法来简化代码
- 删除方法中的冗余代码
- 如何在jquery中使用单个取消删除方法删除多个事件委托
- 删除时删除方法不起作用
- IE7 上的 jquery 删除方法存在问题
- 在 JavaScript 中声明删除方法是否安全?
- 如何将项目id传递给我的控制器以进行删除方法
- 如何通过回调或其他方式删除方法
- 正确的删除方法一个属性
- Rails自定义Twitter引导模式删除方法,回调问题
- 为什么我的 Rails AJAX 删除方法只有在刷新时才有效