اذهب إلى المحتوى

السؤال

نشر

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

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);
    })
})

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

 

Recommended Posts

  • 0
نشر

تقوم بإضافة الازرار الخاصة بالعناصر باستخدام جافاسكريبت وتمرر من كل منها الـ 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.

 

 

  • 0
نشر
بتاريخ 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 

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

شكرا.

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

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...