كيفية حذف عنصر من array في جافاسكريبت

محمود_سعداوي · 7 أكتوبر 2022

لنفترض لدي المصفوفة التالية:

1.JPG.9ec719c5c15dba847db28e73880b8c71.JPG

كيف يمكنني سحب عنصر من هذه المصفوفة عند الضغط على زر محدد. (يعني كل زر يمثل عنصر من المصفوفة)

في الواقع قمت بتجربة array.splice لكن أحيانا الزر يقوم بفسخ العنصر الموالي داخل المصفوفة.

قمت أيضا بتجربة array.slice(i, i+1) لكن دون جدوى أيضا.

let removeProduct = document.querySelectorAll('.remove-to-cart')

removeProduct.forEach((item,i) =>{
    item.addEventListener('click', ()=>{
        // productsInCart.splice(i,1)
       // productsInCart.slice(i,i+1)
        console.log(productsInCart);
    })
})

شكرا على المساعدة

عمر قره محمد · 8 أكتوبر 2022

تقوم بإضافة الازرار الخاصة بالعناصر باستخدام جافاسكريبت وتمرر من كل منها الـ id الخاص به إلى الوظيفة الخاصة بالحذف :

<body>
  <div id="itemList"></div>
  <script>
    // لتكن ههذ هي البيانات الخاصة بك
    let data = [
      { id: 1, name: "بنطار احمر" },
      { id: 2, name: "بنطار اخضر" },
      { id: 3, name: "بنطار اصفر" },
      { id: 4, name: "بنطار جينز" },
    ];

    // الذي سنضع فيه الازرار في البداية div نحضر ال
    const htmlList = document.getElementById("itemList");
    // نقوم بإضافة زر لكل عنصر من البيانات
    data.forEach((element) => {
      // نقوم بإنشاء الزر
      const myButton = document.createElement("button");
      // نعطيع اسم معين وهنا اخترت اسم العنصر
      myButton.innerText = element.name;
      // نضيف ويظيفة لتحدث عن النقر عليه
      myButton.onclick = () => {
        // الخاص بالعنصر كما نمرر الزر نفسه  id نمرر في الوظيفة الـ
        deleteElement(myButton, element.id);
      };
      htmlList.append(myButton);
    });

    const deleteElement = (Button, id) => {
      // نحذف الغنصر باستخدان الانر
      Button.remove();

      // للحصول على العنصر الذي تم اختياره
      const myItem = data.find((element) => element.id === id);
      console.log("myItem", myItem);

      // للحصول على العناصر المابقيين
      data = data.filter((element) => element.id !== id);
      console.log("data", data);
    };
  </script>
</body>

في الوظيفة الخاصة بالحذف تقوم بحذف العناصر باستخدام الـ element.remove.

محمود_سعداوي · 8 أكتوبر 2022

بتاريخ 5 ساعات قال عمر قره محمد:

تقوم بإضافة الازرار الخاصة بالعناصر باستخدام جافاسكريبت وتمرر من كل منها الـ id الخاص به إلى الوظيفة الخاصة بالحذف :


<body>
  <div id="itemList"></div>
  <script>
    // لتكن ههذ هي البيانات الخاصة بك
    let data = [
      { id: 1, name: "بنطار احمر" },
      { id: 2, name: "بنطار اخضر" },
      { id: 3, name: "بنطار اصفر" },
      { id: 4, name: "بنطار جينز" },
    ];

    // الذي سنضع فيه الازرار في البداية div نحضر ال
    const htmlList = document.getElementById("itemList");
    // نقوم بإضافة زر لكل عنصر من البيانات
    data.forEach((element) => {
      // نقوم بإنشاء الزر
      const myButton = document.createElement("button");
      // نعطيع اسم معين وهنا اخترت اسم العنصر
      myButton.innerText = element.name;
      // نضيف ويظيفة لتحدث عن النقر عليه
      myButton.onclick = () => {
        // الخاص بالعنصر كما نمرر الزر نفسه  id نمرر في الوظيفة الـ
        deleteElement(myButton, element.id);
      };
      htmlList.append(myButton);
    });

    const deleteElement = (Button, id) => {
      // نحذف الغنصر باستخدان الانر
      Button.remove();

      // للحصول على العنصر الذي تم اختياره
      const myItem = data.find((element) => element.id === id);
      console.log("myItem", myItem);

      // للحصول على العناصر المابقيين
      data = data.filter((element) => element.id !== id);
      console.log("data", data);
    };
  </script>
</body>

في الوظيفة الخاصة بالحذف تقوم بحذف العناصر باستخدام الـ element.remove.

شكرا.

لا يمكنني إضافة لأنها بطبعها موجودة.

بتاريخ 3 دقائق مضت قال محمود سعداوي:

شكرا.

لا يمكنني إضافة لأنها بطبعها موجودة.

قمت بإضافة data-click لكل زر ثم قمت بعمل filter

يعني هي نفس فكرتكم.

شكرا.

كيفية حذف عنصر من array في جافاسكريبت

السؤال

محمود_سعداوي

رابط هذا التعليق

شارك على الشبكات الإجتماعية

2 أجوبة على هذا السؤال

Recommended Posts

عمر قره محمد

رابط هذا التعليق

شارك على الشبكات الإجتماعية

محمود_سعداوي

رابط هذا التعليق

شارك على الشبكات الإجتماعية

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية