logo标签列表

对象不支持属性或方法“remove”

javascripthtmlinternet-explorer
31

我知道使用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; ?>&nbsp;<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>
它不支持IE https://developer.mozilla.org/zh-CN/docs/Web/API/ChildNode.remove - Jason Sperske
2
https://dev59.com/dXA75IYBdhLWcg3wRW2c - Andy
IE10在使用.remove()时会出现一个大错误。我很惊讶这个版本相当现代，却不支持这个功能！ - repzero
请看下面的纯原生JavaScript解决方案。 - Ravinder Payal
5个回答
50

您应该获取要删除的元素的父元素，并使用removeChild方法查找并移除该元素。

element.parentNode.removeChild(element);

这适用于所有浏览器，包括IE。

1
parentElement 在 IE11 中返回 null，但 parentNode（如此处所示）可以正常工作。谢谢！这应该被接受为最佳答案，因为它快速且不使用任何其他库，并且不搜索文档树。 - Dean
感谢 @dean 的反馈。 - Joshua
2
非常优雅、干净、纯粹。 - Egg
3
我更喜欢这个使用纯 JavaScript 的答案，它比使用 jQuery 的被接受的答案更加简洁。 - Ru Chern Chong
48
采纳了您的建议，替换成以下代码： $('#tab-' + x).remove(); $('#module-' + x).remove(); $('#tab-module-' + x).remove();现在它可以正常工作了！ - Bryan Gould
@Bryan 没问题，如果这个方法对你有用的话，你可以将它标记为解决方案，这样每个人都知道你的问题已经得到解决。 - Christoph
12

您应该使用这个

element.parentElement.removeChild(element);

这种方法被所有浏览器支持，并且相比于仅仅是删除子元素的hack，它也有一些优势。

以下是另一种保留使用.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();

这里是进一步了解的Stack Overflow链接，也是本答案的来源。

4
似乎IE10也会抛出此错误...下面是我尝试使用对象的outerHTML属性的一种方法：
    if(typeof document.getElementById('id').remove=='function'){
       //If support  is found 
        document.getElementById('id').remove()
    }
    else{
      //If not
       document.getElementById('id').outerHTML='';
   }
1

你可以使用 polyfill 方法来实现 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]);
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接