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

ADD,DELETE,SELECTقرار یه همچین چیزی بسازیم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 })لینک فایل ها https://github.com/mamadhasn/ADD-SELECT-DELETE