Jak usunąć jednocześnie element ze strony i localStorage za pomocą przycisku

Tak jak w temacie chce usunąć dany element na stronie za pomocą przycisku do usuwanie i jednocześnie w tym samym momencie usunąć go z localStorage. Na razie napisałem funkcje która mi usuwa dany element ze strony. To mój kod:

document.addEventListener('DOMContentLoaded', function() {
	const keys = Object.keys(localStorage);
	keys.forEach(function(key) {
		const value = localStorage.getItem(key);
		addForm(value);
	});
});
const input = document.querySelector('input');
const btnSubmit = document.querySelector('button');
btnSubmit.addEventListener('click', function(ev) {
	ev.preventDefault();
	if (validator()) {
		addForm(input.value);
		setItemLS();
		removeItemLS();
	}
});
function validator() {
	if (input.value == '') {
		alert('Nie może być puste');
		return false;
	}
	return true;
}

const list = document.querySelector('ul');
function addForm(value) {
	const li = document.createElement('li');
	li.classList.add('elements-list');
	li.innerHTML += `
		<p>
			First name
			<span data-first-name>${value}</span>
		</p>
		<button type="button" data-button-edit>EDIT</button>
		<button type="button" data-button-delete>DELETE</button>`;
	const btnEdit = li.querySelector('[data-button-edit]');
	const btnDelete = li.querySelector('[data-button-delete]');
	btnEdit.addEventListener('click', editElement);
	btnDelete.addEventListener('click', deleteElement);
	list.appendChild(li);
}

let id = 0;
function setItemLS() {
	localStorage.setItem(`first-name-${id++}`, `${input.value}`);
}

function removeItemLS(key) {
	localStorage.removeItem(key);
}

function editElement() {
	const li = this.parentNode;

	const currentTitleElement = this.previousElementSibling;

	const editElementContainer = document.createElement('div');
	editElementContainer.classList.add('task-element-container');
	editElementContainer.innerHTML = `<label>Wprowadź treść zadania</label><input type="text"><button type="button">OK</button>`;

	const submitTitleBtn = editElementContainer.querySelector('button');
	submitTitleBtn.addEventListener('click', function() {
		const newTitle = editElementContainer.querySelector('input').value;
		if (newTitle == '') {
			alert('Pole do edycji nie może być puste');
			return;
		}

		currentTitleElement.innerHTML = newTitle;
		li.removeChild(editElementContainer);
	});

	li.appendChild(editElementContainer);
}

function deleteElement() {
	list.removeChild(this.parentNode);
}

W Twoim kodzie brakuje przekazywania id kasowanego elementu do funkcji kasującej.
Po 1) Przekaż id nowego elementu do funkcji dodającej nowy element

btnSubmit.addEventListener('click', function(ev) {
    let id = 0;
    ev.preventDefault();
    if (validator()) {
        addForm(id, input.value);
        setItemLS(id++);
    }
});

function setItemLS(id) {
    localStorage.setItem(`${id}`, `${input.value}`);
}

Po 2) przy klikaniu w przycisk do kasowania, usuwaj element zarówno z drzewa DOM jak i z localStorage

function addForm(id, value) {
    const list = document.querySelector('ul');
    const li = document.createElement('li');
    ...
    btnDelete.addEventListener('click', () => {
        deleteElement(li);
        removeItemLS(id);
    });
}

function removeItemLS(key) {
    localStorage.removeItem(key);
}