Удаление объекта по клику
Люди, поможите, кто-нибудь!)
Мой скрипт создает сотню дивов, так же есть рабочая кнопка "+1 див". Но вот я бы хотел что бы при нажатии на див, он удалялся. На jquery я бы это легко сделал, но хочется научиться на ванильном JS. Научите пожалуйста, как это делается? <div id="container"> </div> <button onClick="addNode()">+1 circle</button>
var container = document.getElementById('container');
var div = document.getElementsByClassName('circle');
// add div in container
var addNode = function() {
div = document.createElement('div');
div.className = 'circle';
container.appendChild(div);
};
// how much? 100
for(i = 0; i < 100; i++) {
addNode();
}
div.onClick = function(event) {
console.log(this.event);
};
|
div.onclick = function() {
container.removeChild(this);
};
|
Спасибо, родной!
Но я наблюдаю глюк с этим: удаляется только один последний элемент. |
JoeCocker, Вам нужно всех детей удалить или что?
while(container.firstChild) {
container.removeChild(container.firstChild);
}
|
Спасибо, теперь у меня есть кнопка -1 с конца))
Нужно что бы по клику на конкретный див, он же и удалялся. |
JoeCocker, так вашайте клик на созданный div. :)
div.onclick = function() {
container.removeChild(this);
};
|
|
var container = document.getElementById('container');
var div = document.getElementsByClassName('circle');
function removeDiv() {
container.removeChild(this);
};
// add div in container
var addNode = function() {
div = document.createElement('div');
div.className = 'circle';
div.onclick = removeDiv;
container.appendChild(div); // insert div
};
// how much? 100
for(var i = 0; i < 100; i++) {
addNode();
}
var removeNode = function() {
container.removeChild(container.lastChild); // remove div
};
|
О, да! ))
Буду благодарен за расшифровку строки div.onclick = removeDiv; |
JoeCocker, присвоение функции.
Аналогично:
div.onclick = function() {
container.removeChild(this);
};
Только этот аналог плох тем, что каждый раз новая функция создаётся. Мы же, уже заранее определили функцию removeDiv и просто её присваиваем каждый раз. |
| Часовой пояс GMT +3, время: 00:53. |