удаление из localstorage

Question

после того как пользователь ввёл соответствующую инфу в инпуты и нажал на кнопку 'save', инфа сохраняется в localstorage и появляется в таблице в месте с кнопкой 'x', задача при нажатии на кнопку 'X' удалить соответствующую строку, не пойму как реализовать, вот весь код:

 let data = localStorage.mardik
 if(data){
     data=JSON.parse(data)
     data.map(item=>{
        let tr=`
        <tr>
        <td>${item.anun}</td>
        <td>${item.azganun}</td>
        <td>${item.tariq}</td>
        <td><button class="btn btn-danger" id="clr">&times;</button></td>
         </tr>
            `
            document.querySelector('table')
                    .innerHTML+=tr
     })
 }
btn.addEventListener('click',()=>{
    let anun=first.value
    let azganun=last.value
    let tariq=age.value
     let obj={anun,azganun,tariq}
    if(!anun||Number(anun)){
        first.style.border='1px solid red'
        err.innerHTML='ERROR'
        err.style.color='red'
    }else{
        first.style.border='1px solid green'
        err.innerHTML=''
    }
    if(!azganun||Number(azganun)){
        last.style.border='1px solid red'
        err.innerHTML='ERROR'
        err.style.color='red'
    }else{
        last.style.border='1px solid green'
        err.innerHTML=''
    }
    if(!tariq||tariq<1||isNaN(tariq)||parseInt(tariq)!=tariq){
        age.style.border='1px solid red'
        err.innerHTML='ERROR'
        err.style.color='red'
    }else{
        age.style.border='1px solid green'
        err.innerHTML=''
    }
    let zangvac=localStorage.mardik
     if(age.style.border=='1px solid green'&&first.style.border=='1px solid green'&&last.style.border=='1px solid green'){
        if(!zangvac){
            zangvac=[obj]
         }else{
            zangvac=JSON.parse(zangvac)
            zangvac.push(obj)
        }
        localStorage.mardik=JSON.stringify(zangvac)
        
        location.reload()

     }
 })

 Array.from(clr).map(item=>{
     item.addEventListener('click',()=>{
         localStorage.removeItem(this.data)
     })
 })

<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

	
</head>
<body>
	<div class="container">
		<h1>Database</h1>
		<div class="row">
			<div class="col-md-4">
				<h3>Add new Person</h3>
				<h5 id="err"></h5>
				<div class="form-group">
					<label>Name</label>
					<input type="text" id="first" class="form-control">
				</div>
				<div class="form-group">
					<label>last</label>
					<input type="text" id="last" class="form-control">
				</div>
				<div class="form-group">
					<label>Age</label>
					<input id="age" class="form-control">
				</div>
				<div class="form-group">
					<button id="btn" class="btn btn-success">Save</button>
				</div>
			</div>
			<div class="col-md-8">
				<h3>Person List</h3>
				<table class="table table-dark">
					<tr>
						<th>name</th>
						<th>surname</th>
						<th>age</th>
						<th>actions</th>
					</tr>
					
				</table>
			</div>
		</div>	
	</div>

</body>
 </html>

Answer 1

Вы сохраняете элементы как массив объектов.
В этом случае так просто удалить по ключу у Вас не выйдет.
Вот дописанный протестированный вариант (Добавил комментариев для понимания и ещё добавил удаление строки, а не только значения из localstorage):

    let data = localStorage.mardik
    console.log(data);
    if(data){
        data=JSON.parse(data)
        data.map(item=>{
            let tr=`
        <tr>
        <td>${item.anun}</td>
        <td>${item.azganun}</td>
        <td>${item.tariq}</td>
        <td><button class="btn btn-danger" id="clr">&times;</button></td>
         </tr>
            `
            document.querySelector('table')
                .innerHTML+=tr
        })
    }
    btn.addEventListener('click',()=>{
        let anun=first.value
        let azganun=last.value
        let tariq=age.value
        let obj={anun,azganun,tariq}
        if(!anun||Number(anun)){
            first.style.border='1px solid red'
            err.innerHTML='ERROR'
            err.style.color='red'
        }else{
            first.style.border='1px solid green'
            err.innerHTML=''
        }
        if(!azganun||Number(azganun)){
            last.style.border='1px solid red'
            err.innerHTML='ERROR'
            err.style.color='red'
        }else{
            last.style.border='1px solid green'
            err.innerHTML=''
        }
        if(!tariq||tariq<1||isNaN(tariq)||parseInt(tariq)!=tariq){
            age.style.border='1px solid red'
            err.innerHTML='ERROR'
            err.style.color='red'
        }else{
            age.style.border='1px solid green'
            err.innerHTML=''
        }
        let zangvac=localStorage.mardik
        if(age.style.border=='1px solid green'&&first.style.border=='1px solid green'&&last.style.border=='1px solid green'){
            if(!zangvac){
                zangvac=[obj]
            }else{
                zangvac=JSON.parse(zangvac)
                zangvac.push(obj)
            }
            localStorage.mardik=JSON.stringify(zangvac);

            location.reload()

        }
    })

    Array.from(clr).map(item=>{
        item.addEventListener('click',()=>{
            let ppp = item.parentNode.parentNode.children; // Получаем родителей
            let nnn = new Object(); // Создаём объект
            nnn['anun'] = ppp[0].innerText;
            nnn['azganun'] = ppp[1].innerText;
            nnn['tariq'] = ppp[2].innerText;
            let loc = JSON.parse(localStorage.mardik); // Значение из localstorage сначала в массив объектов
            loc.forEach(function (c,z) { // Для каждого объекта
                if(JSON.stringify(c) == JSON.stringify(nnn)){ // Сравниваем как строки
                    loc.splice(z,1); // Вырезаем из массива совпавший объект
                    item.parentNode.parentNode.remove(); // Удаляем строку
                }
            });
            localStorage.mardik = JSON.stringify(loc); // Перезаписываем localstorage
        })
    })

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">


</head>
<body>
<div class="container">
    <h1>Database</h1>
    <div class="row">
        <div class="col-md-4">
            <h3>Add new Person</h3>
            <h5 id="err"></h5>
            <div class="form-group">
                <label>Name</label>
                <input type="text" id="first" class="form-control">
            </div>
            <div class="form-group">
                <label>last</label>
                <input type="text" id="last" class="form-control">
            </div>
            <div class="form-group">
                <label>Age</label>
                <input id="age" class="form-control">
            </div>
            <div class="form-group">
                <button id="btn" class="btn btn-success">Save</button>
            </div>
        </div>
        <div class="col-md-8">
            <h3>Person List</h3>
            <table class="table table-dark">
                <tr>
                    <th>name</th>
                    <th>surname</th>
                    <th>age</th>
                    <th>actions</th>
                </tr>

            </table>
        </div>
    </div>
</div>

Answer 2

Заметка: Нельзя добавлять id="clr" для каждой кнопки в tr. id должно быть уникальным.

Обьясния внизу, а тут рабочий вариант: https://codesandbox.io/s/kind-borg-9zmto?file=/src/index.js:142-394

Вот отличный урок по создание похожего приложения без обновления страницы: https://www.youtube.com/watch?v=XByK_MG_T_M

Как я поправил ваше приложение:

Я обновил обработку кнопки

const clearBtn = document.querySelectorAll(".clr"); // Ищем по класу. sd должно быть уникальным
clearBtn.forEach(function(el) {
  el.addEventListener("click", function(event) {
    let id = event.target.dataset.id; // Берем id
    let itemIndex = data.findIndex(item => +item.id === +id); // Ищем индек элеменда в списке
    if (itemIndex === -1) return;
    data.splice(itemIndex, 1); // Удаляем из списка
    localStorage.setItem("mardik", JSON.stringify(data));
    location.reload(); // Обновляем страницу и тогда не будет элемента
    // Или без обновления удаляем через js
  });
});

Добавил id в схему даных:

  let obj = { anun, azganun, tariq, id: Date.now() };

И этот id поместил в html

    let tr = `
       <tr>
       <td>${item.anun}</td>
       <td>${item.azganun}</td>
       <td>${item.tariq}</td>
       <td><button class="btn btn-danger clr" data-id="${
         item.id
       }">&times;</button></td>
        </tr>
           `;

БЛОГ НА HUSL

удаление из localstorage

Ответы (2 шт):