Правильный путь в JavaScript для сравнения двух элементов DOM и удалить дубликаты, созданные AppendChild в Loop? ⇐ Javascript

[Anonymous]

Я новичок в программировании JavaScript и пытаюсь улучшить свои навыки. Прямо сейчас я пытаюсь создать динамически обновленный список задач, в котором пользователь может ввести имя своей задачи, дату конкуренции и сохранить его в списке, из которого пользователь может удалить свою задачу. Проблема заключается в том, что каждый раз, когда пользователь добавляет новую задачу в список, функция рендеринга создает дубликаты предыдущей задачи в DOM и списке растет экспоненциально.
здесь мой код JS: < /p>
const taskList = JSON.parse(localStorage.getItem('taskList')) || [];
const btnElemAdd = document.querySelector('.js-button-add');

renderTaskList();

function renderTaskList() {
const renderElem = document.querySelector('.js-render-result');
const fragment = document.createDocumentFragment();
for (const [i, value] of taskList.entries()) {
const { name, dueDate } = value;
const divName = document.createElement('div');
const divDate = document.createElement('div');
const btnRm = document.createElement('button');
divName.classList.add('name');
divDate.classList.add('date');
btnRm.classList.add('button', 'button-rm');
btnRm.textContent = 'Remove';
btnRm.addEventListener('click', () => {
rmTask(i);
})
divName.textContent = `${name}`;
divDate.textContent = `${dueDate}`;
if (!(divName.isSameNode(divName))) {
fragment.appendChild(divName);
fragment.appendChild(divDate);
fragment.appendChild(btnRm);
}

}
renderElem.appendChild(fragment);
}

btnElemAdd.addEventListener('click', () => {
const inputElemName = document.querySelector('.js-input-name');
const inputElemDate = document.querySelector('.js-input-date');
const name = inputElemName.value;
const dueDate = inputElemDate.value;
taskList.push({ name, dueDate });
inputElemName.value = '';
renderTaskList();
saveTaskList();
})

function saveTaskList() {
localStorage.setItem('taskList', JSON.stringify(taskList));
}

function rmTask(index) {
taskList.splice(index, 1);
renderTaskList();
}
< /code>
Я могу выполнить этот проект с использованием цикла Foreach () и редактируя innerhtml, но я не могу понять, как сделать это с помощью AppendChild. Я попытался проверить дубликаты несколькими различными способами (включая IssameNode (), isequalNode () и назначение и переназначение свойств объектам массива), но решение все еще ускользает от меня. И в дополнение к этой кнопке, которая должна удалять задачи из массива и списка, не функционирует.


Подробнее здесь: https://stackoverflow.com/questions/797 ... ates-creat