31

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();
            }
            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.

<?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>
Christoph
  • 50,121
  • 21
  • 99
  • 128
Bryan Gould
  • 321
  • 1
  • 3
  • 5

5 Answers5

50

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

element.parentNode.removeChild(element);

this works in all browsers including IE.

Joshua
  • 818
  • 11
  • 12
  • 1
    parentElement was coming up null in IE11, but parentNode (as here) worked fine. Thanks! This should be accepted as the best answer because it is fast and does not use any other libraries and does not search the document tree. – Dean Jun 20 '17 at 16:15
  • Thanks @dean for the feedback – Joshua Jun 28 '17 at 06:24
  • 2
    Very elegant, clean and vanilla. – Egg Oct 10 '17 at 10:15
  • 3
    I like this more than the accepted answer that uses jQuery. This vanilla Javascript better is so much cleaner. – Ru Chern Chong Mar 20 '18 at 10:50
48

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();

with

$('#tab-' + x).remove();
Christoph
  • 50,121
  • 21
  • 99
  • 128
  • Took you suggestion and replaced with: $('#tab-' + x).remove(); $('#module-' + x).remove(); $('#tab-module-' + x).remove(); and now it works! – Bryan Gould Sep 20 '13 at 15:05
  • @Bryan you are welcome. If this worked for you, you can mark this answer as solution so everybody knows that your issues has been solved. – Christoph Sep 20 '13 at 15:14
12

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

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.

Community
  • 1
  • 1
Ravinder Payal
  • 2,884
  • 31
  • 40
4

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 
        document.getElementById('id').remove()
    }
    else{
      //If not
       document.getElementById('id').outerHTML='';
   }
repzero
  • 8,254
  • 2
  • 18
  • 40
1

You can polyfill the remove() method:

(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]);
Nathan B
  • 1,625
  • 1
  • 17
  • 15