Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 01.01.2016, 14:06
Интересующийся
Отправить личное сообщение для JoeCocker Посмотреть профиль Найти все сообщения от JoeCocker
 
Регистрация: 23.12.2014
Сообщений: 23

Удаление объекта по клику
Люди, поможите, кто-нибудь!)

Мой скрипт создает сотню дивов, так же есть рабочая кнопка "+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);
	};
Ответить с цитированием
  #2 (permalink)  
Старый 01.01.2016, 14:08
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,018

div.onclick = function() {
   container.removeChild(this);
};
Ответить с цитированием
  #3 (permalink)  
Старый 01.01.2016, 14:20
Интересующийся
Отправить личное сообщение для JoeCocker Посмотреть профиль Найти все сообщения от JoeCocker
 
Регистрация: 23.12.2014
Сообщений: 23

Спасибо, родной!
Но я наблюдаю глюк с этим: удаляется только один последний элемент.
Ответить с цитированием
  #4 (permalink)  
Старый 01.01.2016, 14:25
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,018

JoeCocker, Вам нужно всех детей удалить или что?

while(container.firstChild) {
   container.removeChild(container.firstChild);
}
Ответить с цитированием
  #5 (permalink)  
Старый 01.01.2016, 14:34
Интересующийся
Отправить личное сообщение для JoeCocker Посмотреть профиль Найти все сообщения от JoeCocker
 
Регистрация: 23.12.2014
Сообщений: 23

Спасибо, теперь у меня есть кнопка -1 с конца))

Нужно что бы по клику на конкретный див, он же и удалялся.
Ответить с цитированием
  #6 (permalink)  
Старый 01.01.2016, 14:41
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,018

JoeCocker, так вашайте клик на созданный div.

div.onclick = function() {
   container.removeChild(this);
};
Ответить с цитированием
  #7 (permalink)  
Старый 01.01.2016, 14:52
Интересующийся
Отправить личное сообщение для JoeCocker Посмотреть профиль Найти все сообщения от JoeCocker
 
Регистрация: 23.12.2014
Сообщений: 23

Не срабатывает.

Вот что сейчас имеем: http://js.do/code/78280
Ответить с цитированием
  #8 (permalink)  
Старый 01.01.2016, 14:55
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,018

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

	};
Ответить с цитированием
  #9 (permalink)  
Старый 01.01.2016, 15:18
Интересующийся
Отправить личное сообщение для JoeCocker Посмотреть профиль Найти все сообщения от JoeCocker
 
Регистрация: 23.12.2014
Сообщений: 23

О, да! ))

Буду благодарен за расшифровку строки
div.onclick = removeDiv;
Ответить с цитированием
  #10 (permalink)  
Старый 01.01.2016, 15:21
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,018

JoeCocker, присвоение функции.

Аналогично:

div.onclick = function() {
    container.removeChild(this);
};


Только этот аналог плох тем, что каждый раз новая функция создаётся. Мы же, уже заранее определили функцию removeDiv и просто её присваиваем каждый раз.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
js удаление объекта по ссылке this madCoder Общие вопросы Javascript 1 03.12.2015 09:12
Удаление элементов из объекта jQuery glukonator jQuery 2 28.07.2012 22:15
Скрипт вычисления координат объекта banderasantonio197555 Events/DOM/Window 4 16.08.2011 17:37
Можно ли получить имя экземпляра объекта внутри самого объекта? Ichigeki Общие вопросы Javascript 9 14.11.2008 19:00
Удаление объекта по Id viod Events/DOM/Window 2 07.10.2008 11:51