Загрузка и удаление изображений с DOM, Javascript

Question

Я новичок в DOM, и у меня возникают проблемы с удалением нескольких загруженных изображений

, загружаются 7 изображений (1.jpg, 2.jpg и т. Д.)

function loadImages() {

    for (var i = 1; i < 8; i++ ) { 
        var img = document.createElement("img"); 
        img.src = "images/"+i+".jpg";
        var idName = "img"+i+"";
        document.getElementById(idName).appendChild(img);
    }
}

это должно удалить их все, но не ... Я думаю, что это разрывается в строке removeChild.

function removeImages() {   

    for (var i = 1; i < 8; i++ ) { 
        var idName = "img"+i+"";
        var d = document.getElementById(idName);
        d.removeChild(document.getElementById(img));
    }
}

Я думаю, что делаю что-то в корне неправильно,потому что я не совсем понимаю, как это работает ...

Answer 1

В функции removeImages переменная img не инициализируется. И даже если это так, вы не устанавливаете идентификатор для любого из изображений в функции loadImages. Вы можете изменить свой код следующим образом:

function loadImages() {

    for (var i = 1; i < 8; i++ ) { 
        var img = document.createElement("img"); 
        img.src = "images/"+i+".jpg";
        img.id = i;
        var idName = "img"+i+"";
        document.getElementById(idName).appendChild(img);
    }
}

function removeImages() {   

    for (var i = 1; i < 8; i++ ) { 
        var d = document.getElementById(i);
        d.parentNode.removeChild(d);
    }
}

Answer 2

Если вы выполняете DOM-манипуляции, я бы порекомендовал вам использовать jQuery (или хотя бы попробовать).

Это сделает вашу жизнь более приятной, вы станете счастливее и не допустите совершения харакири.

Answer 3

Ваш пример кода подразумевает, что вы пытаетесь удалить дочерний элемент изображения, а не само изображение. Кроме того, вы используете неправильную переменную для ссылки на изображение. Может быть, это работает, когда вы замените эту строку:

    d.removeChild(document.getElementById(img));

С этим:

    d.parent.removeChild(document.getElementById(idName));

Кроме того, если вы не очень хорошо знакомы с деревом DOM, вы можете взглянуть на jQuery, который более независим от браузера, чем обычные инструкции DOM.