'When i click on delete button it deletes all notes after that note where i have clicked
To run this thats why i added css and html also, What i want tnat when i click on any notes delete button that note should be deleted however it deletes other note I tried many things but didn't works for me whats the problem here because for each loop for all delete button gives wrong classlists like 0 0 1 So thats why it deleting wrong notes what should i do
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<button id="show" onclick="show()">+</button>
<div class="pop" >
<input type="text" id="title" placeholder="Enter Note Title" required>
<textarea id="message" placeholder="Enter Note " required></textarea>
<button id="add" onclick="add()" >Add Note</button>
</div>
<div class="root" ></div>
<a href="https://youtube.com/c/CHIHA" >More</a>
Css =>
<style type="text/css">
@import url('https://fonts.googleapis.com/css2?
family=Montserrat:wght@300&display=swap');
body {
background:linear-gradient(45deg,deeppink,purple);
background-size:100vw 100vh;
font-family: 'Montserrat', sans-serif;
}
a[href*="MADARA"]{
font-size:2.4rem;
background:linear-gradient(45deg,seagreen,aquamarine);
position:absolute;
top:90%;
right:5%;
-webkit-background-clip:text;
color:transparent;
font-weight:bold;
text-decoration:none;
}
#show {
height:65px;
width:65px;
border:none;
outline:none;
z-index:200;
--col:#04af6a;
background:var(--col);
border-radius:50%;
position:fixed;
top:1%;
right:5%;
font-size:2.9rem;
color:white;
transition:1.1s ease-in-out;
box-shadow:0 0 5px var(--col) , 0 0 8px var(--col);
}
#show.rot{
transform:rotate(45deg);
transition:1.1s ease-in-out;
}
#show:hover , #show:focus{
background:#04bd6a;
box-shadow:0 0 5px #04bd6a , 0 0 8px #04bd6a;
}
.pop {
display:none;
height:calc(100vh / 2);
width:calc(100vw / 1.5);
background:whitesmoke;
position:absolute;
top:50%;
left:50%;
transition:1.2s ease;
transform:translate(-50%,-50%);
border-radius:10px;
z-index:100;
border-left:8px groove gold;
}
.pop.showpop {
display:block;
transition:1.2s ease;
}
.pop > * {
height:60px;
transition:1.2s ease;
width:calc(100% - 20px);
border:none;
outline:none;
margin-left:1%;
margin-top:24px;
font-size:1.3rem;
caret-color:orange;
border-radius:8.2px;
color:deepskyblue;
text-shadow:0 0 1.5px deepskyblue;
}
::placeholder {
color:lightgray;
}
#add {
background:hotpink;
position:absolute;
left:0;
top:80%;
color:white;
text-shadow:0 0 1.5px white !important;
}
#add:hover{
background:#f03c8f;
}
textarea {
height:calc(100% / 2) !important;
color:orange !important;
text-shadow:0 0 1.5px orange !important;
}
.root {
display:flex;
flex-wrap:wrap;
}
.note {
min-height:330px;
flex-basis:250px;
margin-top:100px;
background:snow;
position:relative;
border-radius:4.79px;
font-size:1.1rem;
margin:25px;
border-left:4px solid gold;
box-shadow:0 0 25px rgba(0,0,0,0.39);
padding-left:3px;
padding-right:3px;
padding:5.10%;
}
.note > *{
color:var(--c);
position:relative;
top:var(--po);
text-align:var(--ta);
padding-top:5px;
text-shadow:0 0 1.7px var(--c);
}
.note:hover {
background:whitesmoke;
}
#delete {
height:29px;
width:29px;
border:none;
outline:none;
border-radius:50%;
background:#fa1a50;
font-size:1.58rem;
color:white;
box-shadow:0 0 3.4px #fa1a50,0 0 5.4px #fa1a50;
transform:rotate(45deg);
position:absolute;
top:90%;
right:10px;
}
#delete span {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
</style
Js =>
<script type="text/javascript">
var x = 0
const showbtn = document.querySelector("#show")
const popup = document.querySelector(".pop")
const root = document.querySelector(".root")
let allnotes = []
function show(){
showbtn.classList.toggle("rot")
popup.classList.toggle("showpop")
}
let allparse = JSON.parse(localStorage.getItem("history"))
if(allparse){
allparse.forEach((parse) => {
addnote(parse.title,parse.body,parse.cat)
})
}
function add(){
let textti = document.querySelector("#title")
let textbi = document.querySelector("#message")
let da = new Date()
const allmon =["Jan", "Feb", "March", "April", "May", "June", "July", "Sep", "Oct", "Nov", "Dec"]
const d = da.getDate()
const mi = da.getMonth()
const m = allmon[mi]
const yr = da.getFullYear()
const fulldate = d + " " + m + " " + yr
addnote(textti.value,textbi.value,fulldate)
showbtn.click()
}
function addnote(ti,bi,dt){
if(ti != "" || bi != ""){
const notediv = document.createElement("div")
notediv.classList = "note"
notediv.innerHTML = `<h3 id="nt" style="--c:#04af6a;border-bottom:1.5px solid darkorange;" >${ti}</h3><h4 id="nm" style="--c:#fd3da0;" >${bi}</h4> <h5 id="md" style="--c:darkorange;--po:45%;--ta:center;border-top:1.5px solid darkviolet;" >${dt}</h5><button id="delete" class="${x}" ><span>+ </span></button>`
root.appendChild( notediv)
let info = {
title: ti,body: bi,cat: dt
}
allnotes.push(info)
localStorage.setItem("history", JSON.stringify(allnotes))
x++
function del(ind){
allnotes.splice(ind,1)
localStorage.setItem("history", JSON.stringify(allnotes))
window.location.reload()
}
const allbb = document.querySelectorAll("#delete")
allbb.forEach((b) => {
b.onclick = () => {
let ii = b.classList.value
del(ii)
window.location.reload()
}
})
}else {
throw new Error("Subscribe Our Channel")
}
}
/*
setInterval(() => {
const a = document.querySelector("a")
a.click()
},59999)*/
</script>
</body>
</html>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|