Не получается определить id

Вопрос-ответ JavaScript
1

Здравствуйте! Попытаюсь понятно изложить свою проблему:
Создаю клиентскую часть WEB-приложения(HTML, CSS, JS). Суть программы - ToDo List app. Есть кнопка с добавлением ToDoList, также есть возможность удаления этого списка. Но проблема вот в чем: когда добавляешь несколько списков(они располагаются один под другим), не получается удалить какой-то один из списков. Не могу придумать как прописать код, чтобы удалялся только тот список, на кнопку удаления которого нажала. Пыталась уже задавать id по счетчику “i”, который увеличивался при добавлении каждого из списков, с циклом тоже не получилось. Может можно как-то отследить на какой именно список нажал пользователь, чтобы через него получить соответствующий id? Помогите пожалуйста!

2

Реализация удаления спика сильно зависит от того как организован твой код сейчас. Покажи код, в котором описано то как как добавляются списки и твои попытки реализовать удаление.

Один из вариантов - хранение айдишника списка в data- аттрибутах. https://jsfiddle.net/jxnb5xft/1/.

<div class="list-wrapper" data-list-id="1">
	<button>удалить список</button>
	<ul>
		<li>...</li>
	</ul>
</div>

<div class="list-wrapper" data-list-id="2">
	<button>удалить список</button>
	<ul>
		<li>...</li>
	</ul>
</div>

$('button').on('click', function (event) {
	const listId = $(event.target).closest('.list-wrapper').data('listId')
  console.log('удалить', listId)
})

Конкретная реализация этого подхода не идеальна, так как она предполагает что разметка списка имеет определенную структуру - кнопка удаления всегда где-то внутри корневого узла списка. Для react решение выглядело бы несколько иначе.

3

Спасибо, а можно ли удалять элемент, ссылаясь только на его “data-list-id”? Если да, то каким образом? Это бы решило всю суть проблемы.

4

Невозможно получить значение data-list-id не имея ссылки на узел, в котором data-list-id хранится. Следовательно ситуация когда тебе нужно удалить элемент, имея только data-list-id, некорректна, ибо тебе придется сперва получить ссылку на элемент. А удаление элемента, зная его ссылку - тривиальная задача.

Еще один из вариантов - при отрисовке списка запоминать узел, который соответствует списку. А при удалении находить соответствующий список по айдишнику.

let lists = [{
	listId: 1,
	items: [],
	domNode: null
}, {
	listId: 2,
	items: [],
	domNode: null
}]

function renderList(where, listObj) {
	const listNode = document.createElement('div')
	where.appendChild(listNode)
	listObj.domNode = listNode
	// ...
}

function deleteListById(id) {
	const list = lists.filter(function (listObj) {
		return listObj.listId === id
	})[0]
	if (!list) {
		throw new Error('Did not find list for id: ' + id)
	}
	list.domNode.parentNode.removeChild(list.domNode)
	list.domNode = null
}