Usuwanie elementów z DOM w IE

Jeśli ktoś z was próbował kiedyś dodawać elementy(np. tabelaryczne) za pomocą JS a następnie je usuwać w Internet Explorerze – wie, że to koszmar.

IE ma problem przy usuwaniu elementów poprzez pobieranie listy elementów rodzica(childNodes, czy sprawdzaniu firstChild), np.

function deleteRows(table_id) {
    var oTable = document.getElementById(table_id);
    var oTbody = document.getElementsByTagName('tbody')[0]
    while(oTbody.firstChild) {
        oTbody.removeChild(oTbody.firstChild);
    }
}

Funkcja ta usuwa wszystkie elementy tabeli, które znajdują sie w elemencie <TBODY>. Działa? Niestety nie na IE! Jak sobie poradzić?

Rozwiązanie jest jedno, mianowicie trzeba usunąć całego rodzica(np. <TBODY>). Tutaj jednak także napotkamy problem, związany z usuwaniem elementu pobranego przez document.getElementsByTagName(). Można to objeść poprzez odwołanie do elementu DOM dzięki document.getElementById().

Poniższe funkcje dodają/usuwają wiersze tabeli.

Funkcja addRows() pobiera trzy argumenty: table_id jest identyfikatorem tabeli na stronie; aList to tablica dwuwymiarowa zawierająca wiersze oraz komórki; tbody_id podawany jest tylko dla IE i jest identyfikatorem elementu <TBODY>.

Funkcja deleteRows() usuwa wiersze tabeli , której identyfikator wskazany jest w argumencie table_id; tbody_id jest identyfikatorem <TBODY> i podawany jest tylko dla przeglądarki IE.

function addRows(table_id, aList, tbody_id) {
    var oTable = document.getElementById(table_id);
    if(oTable.getElementsByTagName('tbody') > 0) {
        var oTbody = oTable.getElementsByTagName('tbody')[0]
    } else {
        var oTbody = document.createElement('tbody');
    }
    for(var i = 0; i < aList.length; i++) {
        var oRow = document.createElement('tr');
        for(var j = 0; j < aList[i].length; j++) {
            var oCell = document.createElement('td');
            var oText = document.createTextNode(aList[i][j]);
            oCell.appendChild(oText);
            oRow.appendChild(oCell);
        }
        oTbody.appendChild(oRow);
    }
    if(tbody_id) {
        oTbody.id = tbody_id;
    }
    oTable.appendChild(oTbody);
}

function deleteRows(table_id) {
    var oTable = document.getElementById(table_id);
    var oTbody = document.getElementsByTagName('tbody')[0]
    while(oTbody.firstChild) {
        oTbody.removeChild(oTbody.firstChild);
    }
}

Teraz w kodzie wystarczy tylko sprawdzić, czy mamy do czynienia z Internet Explorerem i wywoływać odpowiednio funkcje.

Voila! 🙂

8 thoughts on “Usuwanie elementów z DOM w IE

  1. Kiedyś nie istniały żadne frameworki JS i trzeba było sobie radzić 🙂 Warto dla treningu czasami porozwiązywać takie problemy bez pomocy narzędzi trzecich 😉

  2. Tak, tak, najlepiej kazać userowi ściągać 1 MiB JavaScriptu tylko po to, żeby wywołać dziesięciolinijkową funkcję.

  3. MGórny: ciekawe z jakiego frameworka korzystałeś. Takie spakowane jQuery waży jakieś 30kb, rozpakowane natomiast tylko 100kb.

    Dzięki temu masz problem z kombinowaniem rozwiązany. Dodatkowo mogę się założyć, że autor musiał napisać o wiele więcej kodu niż tylko to co naskrobał, bo raczej nie pisał tylko i wyłącznie funkcji kasującej tabelki.

    BTW. wiem, że pod IE (nie jestem pewien co do FF i reszty) skasowany element będzie ciągle siedział w pamięci jeśli nie wykasuje się wszystkich referencji do niego. Być może nie będzie go w DOMie, ale i tak gdzieś tam sobie będzie. Problem jest poważny, kiedy stworzy się dynamicznie kilkanaście sporych obiektów, a potem chce się coś kasować. Nie będzie go widać, ale i tak będzie w pamięci.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *