Попытка удалить таблицу DOM, используя JavaScript

Question

У меня есть программа, которая создает таблицу каждый раз, когда я нажимаю кнопку.

Страница продолжает создавать дубликаты таблиц при клике.

Я пытаюсь удалить / удалить / заменить таблицу, если она существует, но она ничего не делает.

Я попробовал следующий код

document.getElementById("paragraphDOM").outerHTML = "";
            document.getElementById("paragraphDOM").remove();
            document.getElementById("paragraphDOM").removeChild(tbl);
            document.getElementById("paragraphDOM").blur;
            document.getElementById("paragraphDOM").innerHTML = "";

Ничто из этого не избавляет от исходной таблицы, я даже пытался создать абзац и добавить таблицу к нему, а затем удалить его, поскольку я получил ошибку, пытаясь установить для внешнего html "", что для него нужен родитель.

Answer 1

Просто используйте parentNode, чтобы определить родителя таблицы, затем примените к ней метод removeChild ()

var tbl=document.getElementById("paragraphDOM");
if(tbl) tbl.parentNode.removeChild(tbl);

Answer 2

Пока ваша переменная tbl правильно определена как таблица, которую вы хотите удалить, она будет удаляться:

tbl.parentNode.removeChild(tbl);

Если у вас уже есть новая таблица, готовая для замены tbl, назовем ее здесь newTbl, вы можете просто сделать это:

tbl.parentNode.replaceChild(newTbl,tbl);

Answer 3

Если вы используете MSIE, вам нужно сослаться на родителя таблицы, чтобы иметь возможность удалить узел:

let table = document.getElementById('#mytable');
let parent = table.parentNode;
parentNode.removeChild(table);

в противном случае во всех других текущих браузерах вы можете просто использовать .remove:

let table = document.getElementById('#mytable');
table.remove();

См. Также caniuse.com для получения более подробной информации о поддержке браузера.