Javascript.RU

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

нахождение родителя родителя элемента DOM
Здравствуйте, есть вот такой HTML:
<div class="list" id="list">
<div class="task" id="task">
<div class="task-txt">
<div class="task-header">Lorem</div>
<div class="task-description">Lorem ipsum dolor sit amet</div>
</div>
<div class="task-buttons">
<input type="button" class="task-done" value="done">
<button class="task-edit"><i class="fas fa-edit"></i></button>
<button class="task-delete" id="delete"><i class="fas fa-trash"></i></button>
<input type="checkbox" class="task-follow">
</div>
</div>
</div>

эта конструкция генерируется по нажатию на кнопку и ее нет в изначальном DOM.

мне нужно, чтобы при нажатии на <button class="task-delete" id="delete"> эта конструкция удалялась, но я не могу разобраться как правильно найти родителя родителя button, тобишь <div class="task" id="task">.

var list = getElementById("list");
task.onclick = function(event){
     var target = event.target;
     var task = getElementById("task");
     if(target.id == "delete"){
          this.removeChild(task);
}
}

Это все что у меня получается, но оно удаляет не тот блок task, в котором находиться нажатая кнопка, а первый из таких же блоков task в блоке list.
Ответить с цитированием
  #2 (permalink)  
Старый 07.08.2018, 05:34
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,709

<template id="list-template">
	<div class="list" id="list" style="margin: 1em;">
		<div class="task" id="task">
			<div class="task-txt">
				<div class="task-header">Lorem</div>
				<div class="task-description">Lorem ipsum dolor sit amet</div>
			</div>
			<div class="task-buttons">
				<input type="button" class="task-done" value="done">
				<button class="task-edit"><i class="fas fa-edit"></i></button>
				<button class="task-delete" id="delete">Delete<i class="fas fa-trash"></i></button>
				<input type="checkbox" class="task-follow">
			</div>
		</div>
	</div>
</template>
<button id="add-button">Add</button>
<script>
	var i = 1;

	// пример добавления
	document.getElementById("add-button").addEventListener("click", function(event) {
		var list = document.getElementById("list-template").content.cloneNode(true);
		list.querySelector(".task-header").textContent += "#" + i++;
		document.body.appendChild(list);
	});
	
	// пример обработки события 
	document.addEventListener("click", function(event) {
		if(event.target.matches(".list .task-delete")) {
			event.target.closest(".list").remove();
		}
	});
</script>

Последний раз редактировалось Malleys, 07.08.2018 в 05:37.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Появление элемента в DOM aktep Элементы интерфейса 15 13.02.2016 12:17
Скрипт при нахождение элемента добавляется класс, анимация Wahlberg Angular.js 0 02.02.2014 00:44
Как определить порядковый номер элемента DOM ? dummer jQuery 7 17.01.2014 15:44
Событие удаления элемента из DOM Danxil Events/DOM/Window 1 11.11.2013 20:54
Замена DOM элемента другим элементом MaxXxaM Events/DOM/Window 5 04.05.2013 00:24