Объект не поддерживает свойство или метод 'remove'

Question

Я знаю, что есть проблема с получением 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> 

Answer 1

remove() как метод на HTMLElements, к сожалению, это not supported by Internet Explorer.

Вы можете использовать обходной путь в this SO answer для ванили яваскрипта решения.

Однако, как вы уже, кажется, использовать JQuery, вместо того, чтобы заменить

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

с

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

Answer 2

Оказывается, что IE10 также выдает эту ошибку ..

Вот один способ, которым я попытался с помощью объекты outerHTML свойство:

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

Answer 3

Вы должны использовать этот

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

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

Answer 4

Вы должны получить родительский элемент, который вы пытаетесь удалить и использовать метод ребенка удалить, чтобы найти и удалить элемент

element.parentNode.removeChild(element); 

это работает во всех браузерах, включая IE.