Как добавить и удалить изображения в div (javascript и html)

Question

Я пытаюсь сделать функцию (в javascript), которая удаляет изображение, которое я прикрепляю к div в html, у меня возникают проблемы с получением изображения, которое я хочу удалять. Общая идея состоит в том, чтобы иметь возможность динамически прикреплять и удалять изображения без необходимости использования нескольких div. Вот функция, чтобы добавить изображение на

function appendImage(imageSource, Id){ 
    var img = document.createElement("IMG"); 
    img.src = imageSource; 
    document.getElementById(Id).appendChild(img); 
} 

Причина создать IMG в функции (вместо снаружи) так что я могу подключить несколько новых к DIV, если я не он просто заменяет изображение Вот что я пытаюсь для удаления изображения на

function removeImage(imageSource,Id){ 
    document.getElementById(Id).removeChild(img); 
} 

Я не могу получить доступ к IMG в removeImage, потому что это не входит в рамки. Итак, есть ли способ передать img в removeImage, не делая его глобальным или, возможно, другим совершенно другим способом, не используя append или remove?

Я не знаю, если вам это нужно, но все, что я имею в моем HTML файла

<div id="image"></div> 

Answer 1

Edit - добавил Codepen пример:

click for Codepen example

Чтобы использовать RemoveChild(), его должен быть вызван от родителя узла, который вы пытаетесь удалить. Ваша функция будет выглядеть примерно так:

function removeImage(id) { 
    var elementToBeRemoved = document.getElementById(id); 
    elementToBeRemoved.parentNode.removeChild(elementToBeRemoved); 
} 

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

РЕДАКТИР альтернатива:

Другая вещь, которую вы могли бы попробовать это есть appendImage вернуть что-то ссылаться позже - либо идентификатор, который вы проходите в, или случайное число. Это можно добавить к новому элементу img, и вы можете ссылаться на него, чтобы удалить его в будущем.

function appendImage(imageSource, containerId, imageId) { 
    var img = document.createElement("IMG"); 
    img.src = imageSource; 
    img.setAttribute('id', imageId); 
    document.getElementById(containerId).appendChild(img); 
    return imageId; 
} 

function removeImage(imageId) { 
    var elementToBeRemoved = document.getElementById(imageId); 
    elementToBeRemoved.parentNode.removeChild(elementToBeRemoved); 
} 

var myImage = appendImage('my.jpg', 'image', 'testId123');

и позже ...

removeImage(myImage); или removeImage('testId123');

Answer 2

вы определяете в своей removeImage функции переменной img? Это не похоже на то, что вы делаете. В removeImage убедитесь, что вы обнаружите, что IMG-то и сохранить его местоположение в переменную, которую затем можно использовать для удаления его

Answer 3

Вы могли бы попытаться считать изображения в DIV и давая каждому изображению идентичность. Чтобы вы знали, какое изображение нужно удалить, когда это необходимо.

function appendImage(imageSource, Id){ 
    var imagecount = document.getElementById('image').childNodes.length; 
    var img = document.createElement("IMG"); 
    img.setAttribute("id", imagecount + 1); 
    img.src = imageSource; 
    document.getElementById(Id).appendChild(img); 
} 
function removeImage(ImageId){ 
    var elem = document.getElementById(ImageId); 
    elem.parentElement.removeChild(elem); 
} 

Answer 4

Вам нужно будет пройти DOM, чтобы найти детей из div.

function removeImage(imageSource,Id){ 
    var div = document.getElementById(Id); 
    for(var i=0; i<div.childNodes.length; i++){ 
     div.removeChild(div.childNodes[i]); //you may need an if to only remove the images 
    } 
} 

Answer 5

Чтобы построить на том, что сказал

Современные Wongesse:

function removeImage(imageSource,Id){ 
    var div = document.getElementById(Id); 
    var image = div.querySelectorAll('[src="' + imageSource + '"]'); 

    div.removeChild(image[0]); 
} 

JQuery:

function removeImage(imageSource,Id){ 
    $('#' + Id + ' [src="' + imageSource + '"]').remove(); 
} 

IE 8+:

function removeImage(imageSource,Id){ 
    var div = document.getElementById(Id); 
    var images = div.getElementsByTagName('img'); 

    for(var i = 0; i < images.length; i++){ 
    if(images[i].src != imageSource){ 
     // not the image we are looking for 
     continue; 
    } 

    div.removeChild(images[i]); 
    break; 
    } 
}