Как удалить старое изображение перед созданием нового?

Question

[Waksim]

Здравствуйте, я недавно начал работать с Javascript и столкнулся с проблемой:

Имеются ссылки, которые вызывают функцию create($)

<div id="page">
	<a href="#" onclick="create('1')">1</a>
	<a href="#" onclick="create('2')">2</a>
	<a href="#" onclick="create('3')">3</a>
	<a href="#" onclick="create('4')">4</a>
	<a href="#" onclick="create('5')">5</a>
	...
</div>

Функция create(num) создаёт иерархию div>img, a

function create(num) { 
	var pagen = document.getElementById('page');
	var block = document.createElement('div');
	var pic = document.createElement('img');
	var link = document.createElement('a');
    
	block.classList.add("window");
	pic.classList.add("image");
	pic.src = '/foto/' + (num) + '.png';
	link.classList.add("button");

	pagen.appendChild(block);
	block.appendChild(pic);
	block.appendChild(link);
}

Проблема: при нажатии на ссылку 1 создаётся 1.png , если после этого нажать на ссылку 2, то на странице останется 1.png и снизу добавится 2.png . Нужно сделать так, чтобы при нажатии на ссылку 2, изображение 1.png удалялось или заменялось на 2.png . (Примечание: необходимо удалить не весь блок window, а только image)

Пожалуйста, помогите! Зарание спасибо)

Comments

[Kovalsky]

Для удаления элементов существует специальная функция, а вообще создавать и удалять изображение каждый раз - это немного странно. Проще всегда иметь там какую-то картинку и ей менять src.

Answer 1

[Exploding]

Сначала хотел было помочь, но ...
Просто возьмите вот этот слайдер и настройте его под свои нужды.
Не хотите этот - да возьмите любой из этих 336 слайдеров!

Потому что...

<div id="page">
	<a href="#" onclick="create('1')">1</a>
	<a href="#" onclick="create('2')">2</a>
	<a href="#" onclick="create('3')">3</a>
	<a href="#" onclick="create('4')">4</a>
	<a href="#" onclick="create('5')">5</a>
	<div class="window">
		<img class="image" src="/foto/1.png">
		<a class="button"></a>
	</div>
	<div class="window">
		<img class="image" src="/foto/2.png">
		<a class="button"></a>
	</div>
	<div class="window">
		<img class="image" src="/foto/3.png">
		<a class="button"></a>
	</div>
	<div class="window">
		<img class="image" src="/foto/4.png">
		<a class="button"></a>
	</div>
	<div class="window">
		<img class="image" src="/foto/5.png">
		<a class="button"></a>
	</div>
</div>

P.S. Да вообще если у Вас откуда-то генерятся (подозреваю что вручную вставляете в html) ссылки эти с онкликом внутри, зачем эта куча js кода? Чего сразу внутри не сделать уже все что нужно??

Answer 2

[Shemil]

learn.javascript.ru