JS - как удалить изображение с помощью JavaScript? - PullRequest
14 голосов
/ 23 июля 2011

Я столкнулся с проблемой, связанной с удалением изображения с JS-кодом, например ...

<img src="image.png" id='image_X'>
...
document.getElementById('image_X').src=''

Изображение остается неизменным :( Так что мой вопрос, как удалить изображение с помощью JS? Подробнее ...Как динамически изменять значение атрибута src для изображения?

Любой полезный комментарий приветствуется

Ответы [ 9 ]

15 голосов
/ 23 июля 2011
var image_x = document.getElementById('image_X');
image_x.parentNode.removeChild(image_x);

http://jsfiddle.net/5DdyL/

7 голосов
/ 23 июля 2011

Вы можете просто спрятать это.В vanilla JS это будет:

document.getElementById("image_X").style.display='none';

В jQuery:

$("#image_X").css('display', 'none');

Если вы действительно хотите удалить его из DOM, есть метод removeChild, который вы можете вызвать на parentNode вашего элемента изображения.

6 голосов
/ 23 июля 2011

Это должно сделать это:

var el = document.getElementById('image_X');
el.parentNode.removeChild(el);

Вы можете попробовать это здесь.

Вы можете аккуратно обернуть это в такую ​​функцию, какитак:

function removeElement(ele) {
    ele.parentNode.removeChild(ele);
}

removeElement(document.getElementById("image_X"));
3 голосов
/ 23 июля 2011

Получает своего родителя и использует removeChild.

var parent = getElementById('parentid');
var child = document.getElementById('imagex');
parent.removeChild(child);
1 голос
/ 12 марта 2014

Попробуйте использовать:

document.getElementByID("").style.visibilty="hidden";

когда вы не хотите показывать изображение и

document.getElementById("").style.visibility="visible";

когда вы хотите показать изображение.

1 голос
/ 23 июля 2011

Чтобы удалить изображение в JavaScript (или вообще удалить что-либо), сначала вам нужно взять элемент, затем перейти к его родительскому элементу, затем вы можете удалить дочерний элемент, используя метод removeChild.

0 голосов
/ 27 июня 2018

1) удалить элемент img, используя родительский узел.2) Затем сохраните этот родительский узел.3) Затем создайте новый элемент img в этом родительском узле.

0 голосов
/ 02 сентября 2013

Попробуйте

 document.getEelementById('image_X').src="''"; 

, но будет отображаться сломанное изображение

0 голосов
/ 23 июля 2012

Я хочу поделиться некоторыми дополнительными советами ...

@ Marecky, благодаря ответу Джареда Фарриша, я могу выяснить некоторые полезные моменты, касающиеся JS ...

Но затем мне пришлосьТакже сделаю свое собственное дополнительное исследование ... Это не супер факт, а небольшой совет по теории ... Итак, в результате я обнаружил, что браузеры, как любое настольное приложение, конечно, создаются с некоторымисвоего рода структура графического интерфейса ... Как правило, большинство сред графического интерфейса (например, Swing), конечно, могут использовать объекты с двойной буферизацией для отображения графики ... Поэтому, когда он (например, FF) повторно переводит скрипт в графические объекты,Реализуются правила синхронизации графического интерфейса ...

... ОК ... Переход от проблем перерисовки графического интерфейса к самому написанию сценариев ...

Поэтому мой вопрос был об игре с объектами DOM... Дело в том, что тег img не обновляет событие пользовательского интерфейса, если активирован такой код, как document.getEelementById ('image_X'). Src = '';Таким образом, пространство тега <body> (по какой-то причине), я не уверен, но поддерживает какое-то состояние «кэширования» ... И, возможно, это делает img (если оно находится в теле) становится «статическим»;Поэтому мне пришлось найти некоторый полезный дополнительный объект, который поддерживает динамическое обновление пользовательского интерфейса.В качестве теста я использовал div вместо тега чистого тела, чтобы сохранить в нем img;Так что не обновлять тело, а только внутреннее содержимое div, и это помогло.Так что использование JS + HTML в моем случае было полезным ...

Надеюсь, этот совет спасет день

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...