Видаліть елемент за ідентифікатором

Видаляючи елемент зі стандартним JavaScript, потрібно спочатку перейти до його батьківського:

var element = document.getElementById("element-id");
element.parentNode.removeChild(element);

Перехід до батьківського вузла спочатку здається мені трохи дивним, чи є причина JavaScript, як це працює?

Я знаю, що розширення функцій рідного DOM не завжди є найкращим чи найпопулярнішим рішенням, але це добре працює для сучасних браузерів.

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

Примітка. Це рішення не працює для IE 7 та нижче. Для отримання додаткової інформації про розширення DOM читайте цю статтю .

EDIT : Переглядаючи мою відповідь у 2019 році, node.remove()допомогла допомогти і її можна використовувати наступним чином (без поліетилену вище):

document.getElementById("my-element").remove();

або

[...document.getElementsByClassName("my-elements")].map(n => n && n.remove());

Ці функції доступні у всіх сучасних браузерах (не в IE). Детальніше читайте на MDN .

Кроссбоузер і IE> = 11:

document.getElementById("element-id").outerHTML = "";

Ви можете зробити removeфункцію так, що вам не доведеться думати про неї кожен раз:

function removeElement(id) {
    var elem = document.getElementById(id);
    return elem.parentNode.removeChild(elem);
}

Це те, що підтримує DOM . Шукайте на цій сторінці "видалити" або "видалити" і видалитиChild - це єдиний, який видаляє вузол.

DOM організований у дереві вузлів, де кожен вузол має значення разом зі списком посилань на його дочірні вузли. Тож element.parentNode.removeChild(element)імітує саме те, що відбувається всередині: Спочатку ви переходите на батьківський вузол, а потім видаляєте посилання на дочірній вузол.

За DOM4, функція помічника надається робити те ж саме: element.remove(). Це працює у 87% браузерів (станом на 2016 рік), але не IE 11. Якщо вам потрібно підтримувати старіші браузери, ви можете:

• Видаліть елементи через батьківський вузол, як у питанні ,
• змінити нативні функції DOM, як у відповіді Йохана Деттмара , або
• використовувати полімер DOM4 .

Для видалення одного елемента:

 var elem = document.getElementById("yourid");
 elem.parentElement.removeChild(elem);

Для видалення всіх елементів, наприклад, певного імені класу:

 var list = document.getElementsByClassName("yourclassname");
 for(var i = list.length - 1; 0 <= i; i--)
 if(list[i] && list[i].parentElement)
 list[i].parentElement.removeChild(list[i]);

ви можете просто використовувати element.remove()

ChildNode.remove()Метод видаляє об'єкт з дерева , якому він належить.

https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove

Ось загадка, яка показує, як можна телефонувати document.getElementById('my-id').remove()

https://jsfiddle.net/52kp584L/

**

Не потрібно розширювати NodeList. Це вже реалізовано.

**

Ви можете безпосередньо видалити цей елемент, використовуючи remove()метод DOM.

ось приклад:

let subsWrapper = document.getElementById("element_id");
subsWrapper.remove();
//OR directly.
document.getElementById("element_id").remove();

Згідно DOM рівню 4 специфікації, яка є поточною версією в розробці, є деякі нові методи зручно мутацій доступні: append(), prepend(), before(), after(), replace(), і remove().

https://catalin.red/removing-an-element-with-plain-javascript-remove-method/

Перехід до батьківського вузла спочатку здається мені трохи дивним, чи є причина JavaScript, як це працює?

Назва функції - це removeChild(), і як можна видалити дитину, коли немає батьків? :)

З іншого боку, вам не завжди потрібно називати це так, як ви показали. element.parentNodeє лише помічником для отримання батьківського вузла даного вузла. Якщо ви вже знаєте батьківський вузол, ви можете просто використовувати його так:

Наприклад:

// Removing a specified element when knowing its parent node
var d = document.getElementById("top");
var d_nested = document.getElementById("nested");
var throwawayNode = d.removeChild(d_nested);

https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild

===================================================== =======

Щоб додати щось більше:

Деякі відповіді вказували на те, що замість використання parentNode.removeChild(child);можна використовувати elem.remove();. Але, як я помітив, є різниця між двома функціями, і це не згадується в цих відповідях.

Якщо ви використовуєте removeChild(), він поверне посилання на видалений вузол.

var removedChild = element.parentNode.removeChild(element); 
console.log(removedChild); //will print the removed child.

Але якщо ви використовуєте elem.remove();, він не поверне вам посилання.

var el = document.getElementById('Example');
var removedChild = el.remove(); //undefined

https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove

Таку поведінку можна спостерігати в Chrome та FF. Я вважаю, що це варто помітити :)

Сподіваюся, моя відповідь додасть певного значення питанню і буде корисною !!

Функції, які використовують ele.parentNode.removeChild (ele), не працюватимуть для створених вами елементів, але ще не вставлених у HTML. Бібліотеки, такі як jQuery і Prototype, розумно використовують такий метод, як наступний, щоб уникнути цього обмеження.

_limbo = document.createElement('div');
function deleteElement(ele){
    _limbo.appendChild(ele);
    _limbo.removeChild(ele);
}

Я думаю, що JavaScript працює так, тому що оригінальні дизайнери DOM вважали головним пріоритетом батьків / дитина та попередню / наступну навігацію, ніж модифікації DHTML, які так популярні сьогодні. Вміти читати з одного <вхідного типу = 'текст'> та писати до іншого за відносним розташуванням у DOM було корисно в середині 90-х, час, коли динамічне генерування цілих HTML-форм чи інтерактивних елементів графічного інтерфейсу ледве блимало якийсь погляд розробника.

Перехід до батьківського вузла спочатку здається мені трохи дивним, чи є причина JavaScript, як це працює?

ІМХО: Причина цього та сама, що я бачив в інших середовищах: Ви виконуєте дію, засноване на вашому "посиланні" на щось. Ви не можете видалити його, коли ви пов’язані з ним.

Як зрізання кінцівки дерева. Сидіти на стороні, найближчій до дерева, під час різання або результат буде ... невдалим (хоча і смішним).

Це насправді походить від FireFox ... Один раз IE випереджав пакет і дозволяв видаляти елемент безпосередньо.

Це лише моє припущення, але я вважаю, що причина того, що ви повинні видалити дитину через батьків, пов’язана з проблемою з тим, як FireFox обробляв посилання.

Якщо ви викликаєте об'єкт, щоб скористатися харі-карі безпосередньо, то одразу після того, як він відмирає, ви все ще тримаєтесь цього посилання на нього. Це може створити кілька неприємних помилок ... таких, як не вдалося їх видалити, видалити, але зберегти посилання на нього, які видаються дійсними, або просто витоку пам'яті.

Я вважаю, що коли вони зрозуміли цю проблему, вирішити проблему було видалення елемента через його батьків, тому що, коли елемента вже немає, ви просто тримаєте посилання на батьків. Це призведе до припинення всієї неприємності, і (якщо, наприклад, закрити деревцевий вузол за вузлом), він би «застебнути» досить непогано.

Це має бути легко виправлена ​​помилка, але, як і багато інших речей у веб-програмуванні, випуск, ймовірно, поспішав, що призвело до цього ... і до появи нової версії, достатньо людей використовували її, що змінити це призведе до щоб зламати купу коду.

Знову ж таки, все це просто мої здогадки.

Однак я з нетерпінням чекаю дня, коли веб-програмування нарешті отримає повне весняне прибирання, всі ці дивні маленькі ідіосинхронії очищаються, і всі починають грати за тими ж правилами.

Напевно, наступного дня після того, як мій робот-службовець подав до суду на мене за заробітну плату.

Як я розумію, видалення вузла безпосередньо не працює у Firefox, лише в Internet Explorer. Отже, щоб підтримати Firefox, вам потрібно піднятися до батьків, щоб видалити його дочірнім.

Посилання: http://chiragrdarji.wordpress.com/2007/03/16/removedelete-element-from-page-using-javascript-working-in-firefoxieopera/

// http://javascript.crockford.com/memory/leak.html
// cleans dom element to prevent memory leaks
function domPurge(d) {
    var a = d.attributes, i, l, n;
    if (a) {
        for (i = a.length - 1; i >= 0; i -= 1) {
            n = a[i].name;
            if (typeof d[n] === 'function') {
                d[n] = null;
            }
        }
    }
    a = d.childNodes;
    if (a) {
        l = a.length;
        for (i = 0; i < l; i += 1) {
            domPurge(d.childNodes[i]);
       }
    }
}

function domRemove(id) {
    var elem = document.getElementById(id);
    domPurge(elem);
    return elem.parentNode.removeChild(elem);
}

Це найкраща функція для видалення елемента без помилки сценарію:

function Remove(EId)
{
    return(EObj=document.getElementById(EId))?EObj.parentNode.removeChild(EObj):false;
}

Примітка до EObj=document.getElementById(EId).

Це ОДИН знак рівності ні ==.

якщо елемент EIdіснує, то функція його видаляє, інакше він поверне помилковий, а не error.