اضافه کردن،انتخاب کردن و حذف کردن با جاوا اسکریپت

قرار یه همچین چیزی بسازیم

HTML
<h1> ADD ,SELECT, DELETE </h1>
<div id=&quotcontn&quot>
<div class=&quotsubone&quot>
<!-- creat two inputs to take product's name and price -->
<label for=&quotproduct&quot>name:</label>
<input type=&quottext&quot id=&quotproduct&quot placeholder=&quotname of product&quot><br>
<!-- //creat checkbox to add product existence -->
<label for=&quotprice&quot>price:</label>
<input type=&quottext&quot id=&quotprice&quot placeholder=&quotprice of product&quot>
<input type=&quotsubmit&quot id=&quotsubmit&quot>
<!-- empety conteaner for add element -->
<div id=&quotsubconteaner&quot>
</div>
</div>
<div id=&quotsecondsub&quot>
<!-- //select all element to remove -->
<label for=&quotselect-ALL_remove&quot>SELECT ALL</label>

<input type=&quotcheckbox&quot id=&quotselect-ALL_remove&quot name=&quotselect-ALL_remove&quot>
<span>and</span>
<label for=&quotremove-all&quot>remove all</label>
<button id=&quotremove-all&quot>DELETE ALL</button>
</div>

CSS

*{
box-sizing: border-box;
}
input[type=&quottext&quot]{
padding: 9px;
margin-top:13px;
}
input[type=&quotsearch&quot]{
padding: 9px;
margin-top:13px;
width: 100%;
margin-left: -68px;
}

input[type=&quotsubmit&quot]{

padding: 9px;
margcolor: aliceblue;
in-top:13px;
background-color: black;
}
#contn{
display: flex;
align-content: space-between;
justify-content: space-between;
align-items: baseline;
flex-direction: column-reverse;
font-size: larger;
}

.subone{
flex:4 ;
}
.subtwo{
flex: 6;
}
#subconteaner{
background-color: rgb(255, 255, 255);
}
input[type=&quottext&quot]{
border-radius: 20px;
border: 3px solid navy;
width: 300px;
line-height: 2rem;
font-size: 20px;
}
#remove-all{
color: wheat;
padding: 12px;
border-radius: 23px;
background-color: black;
}
#remove-all:hover{
background-color: red;
color: aliceblue;
}
#subconteaner button{
padding: 13px;
background-color: #783f3f;
color: aliceblue;
margin-left: 12px;
border-radius: 50%;
box-shadow: 0px 0px 10px 0px #563c3c;
border: none;
}
#subconteaner button:hover{
background-color: red;
color: azure;
}
h1{
text-align: center;
background-color: coral;

}

js
// مرحله اول گرفتن المنت ها

const product=document.getElementById(&quotproduct&quot)
const price=document.getElementById(&quotprice&quot)
const subconteaner=document.getElementById(&quotsubconteaner&quot)
const submit=document.getElementById(&quotsubmit&quot)

const select_toremove=document.getElementById(&quotselect-ALL_remove&quot)
const remove_all_select=document.getElementById(&quotremove-all&quot)
// تعریف آریه خالی برای پوش کردن ولیو ها
let myarry=[];

// اد گردن ایونت لیسنر به  باتن سابمیت برای پوش کردن
submit.addEventListener(&quotclick&quot,e=>{
myarry.push(
{
name:product.value,
price:price.value,
}
)

// پیمایش آرایه و نمایش ولیو ها
document.getElementById(&quotsubconteaner&quot)=&quot&quot
myarry.forEach(e=>{
const elemnt=document.createElement(&quotp&quot)

const span=document.createElement(&quotbutton&quot)
const cheky=document.createElement(&quotinput&quot)
const linky=document.createElement(&quota&quot)
cheky.setAttribute(&quottype&quot,&quotcheckbox&quot)

span.textContent=&quotx&quot
linky.setAttribute(&quothref&quot,&quotwww.school.ir&quot)
elemnt.append(cheky)
elemnt.append(linky)
linky+=` ${e.name} is ${e.price}$ `

elemnt.append(span)
document.getElementById(&quotsubconteaner&quot).append(elemnt)
// حذف المنمت ها
span.addEventListener(&quotclick&quot,e=>{
elemnt.remove()
})
 // حذف کلی المنت ها باسلکت اُل
select_toremove.addEventListener(&quotchange&quot,e=>{
if(e.target.checked){
cheky.checked=true
}else{
cheky.checked=false
}
})
remove_all_select.addEventListener(&quotclick&quot,e=>{
if(cheky.checked){
elemnt.remove()
select_toremove.checked=false
}
})
})
product.value=&quot&quot
price.value=&quot&quot
})

لینک فایل ها