после того как пользователь ввёл соответствующую инфу в инпуты и нажал на кнопку ‘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">×</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>