Object doesn't support property or method 'remove'

I know there is some issue with get document.getElementById and IE, but not sure why IE is having a problem with .remove and all other browsers are not. Any help here would be appreciated. I am getting the error

SCRIPT438: Object doesn't support property or method 'remove'

from the error console. The Javascript works in all other browsers. Here is the code:

<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();
            <?php $tab++; ?>


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.

<?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 } ?>
    <?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 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 />          
                <?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>

        <?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">
              <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><?php echo $entry_limit; ?></td>


remove() as a method on HTMLElements unfortunately is not supported by Internet Explorer.

You could use the workaround in this SO answer for a vanilla javascript solution.

However as you already seem to use jQuery, instead replace

document.getElementById('tab-' + x).remove();


$('#tab-' + x).remove();

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


this works in all browsers including IE.

You should use this


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

Element.prototype.remove = function() {
NodeList.prototype.remove = HTMLCollection.prototype.remove = function() {
    for(var i = this.length - 1; i >= 0; i--) {
        if(this[i] && this[i].parentElement) {

And then you can remove elements like this




Here is Stack Overflow link for further info also source of this answer.

It appears that IE10 also throws this error..

Here one way I tried using the objects outerHTML property:

    if(typeof document.getElementById('id').remove=='function'){
       //If support  is found 
      //If not

Need Your Help

ERROR: While executing gem ... (Errno::EPERM) Operation not permitted

ruby macos rubygems osx-elcapitan compass

I just updated my Mac to OSX 10.11 El Capitan and some gems didn't remain.

Metadata file '.dll' could not be found

c# .net wpf visual-studio-2008 c#-3.0

I am working on a WPF, C# 3.0 project, and I get this error: