هل يمكن اخباري ما سبب الخطا؟ JS

الحل يجب ان يكون بالشكل التالي : 

function subL() {
  let list_1L = document.getElementById("list_li1_lL");
  let list_2L = document.getElementById("list_li2_L");
  let user_skil = document.getElementById("user_skil").value;
  let data = document.createTextNode(user_skil);
  // قمنا بتعريف متغير عشوائي
  const randomId = Math.floor(Math.random() * 1000);

  let li = document.createElement("LI");
  li.appendChild(data);
  //   قنا بإضافة ايدي فريد لكل عنصر نقوم بإضافته
  li.id = `li1_${randomId}`;
  list_1L.appendChild(li);

  let data2 = document.createTextNode(user_skil);
  let li2 = document.createElement("LI");
  li2.appendChild(data2);
  //   ومتغير فريد آخر لكل عنصر في القائمة الثانية كذلك
  li2.id = `li2_${randomId}`;
  list_2L.appendChild(li2);

  let myspan1 = document.createElement("span");
  myspan1.innerHTML = "x";
  //   قمنا بإضافة الوظيفة التي ستحدث عند النقر
  myspan1.onclick = () => {
    //   حيث يجلب العنصر عبر الايدي الذي اعطيناه إياه ثم يقوم بحذفه
    document.getElementById(`li1_${randomId}`).remove();
    document.getElementById(`li2_${randomId}`).remove();
  };
  li.appendChild(myspan1);
}

ثم قومي بتكرار العملية نفسها لكافة الـ functions بنفس الطريقة

تحميل الملف بعد التعديل :  js.js

بتاريخ 36 دقائق مضت قال عمر قره محمد:

الحل يجب ان يكون بالشكل التالي : 

function subL() {
  let list_1L = document.getElementById("list_li1_lL");
  let list_2L = document.getElementById("list_li2_L");
  let user_skil = document.getElementById("user_skil").value;
  let data = document.createTextNode(user_skil);
  // قمنا بتعريف متغير عشوائي
  const randomId = Math.floor(Math.random() * 1000);

  let li = document.createElement("LI");
  li.appendChild(data);
  //   قنا بإضافة ايدي فريد لكل عنصر نقوم بإضافته
  li.id = `li1_${randomId}`;
  list_1L.appendChild(li);

  let data2 = document.createTextNode(user_skil);
  let li2 = document.createElement("LI");
  li2.appendChild(data2);
  //   ومتغير فريد آخر لكل عنصر في القائمة الثانية كذلك
  li2.id = `li2_${randomId}`;
  list_2L.appendChild(li2);

  let myspan1 = document.createElement("span");
  myspan1.innerHTML = "x";
  //   قمنا بإضافة الوظيفة التي ستحدث عند النقر
  myspan1.onclick = () => {
    //   حيث يجلب العنصر عبر الايدي الذي اعطيناه إياه ثم يقوم بحذفه
    document.getElementById(`li1_${randomId}`).remove();
    document.getElementById(`li2_${randomId}`).remove();
  };
  li.appendChild(myspan1);
}

ثم قومي بتكرار العملية نفسها لكافة الـ functions بنفس الطريقة

تحميل الملف بعد التعديل :  js.js

شكرا جدا واضح، بس ممكن تشرح لي ايش يعني هالعبارة `li1_${randomId}` 

randomId فهمت انها المتغير العشوايي لكن لماذا وضعتها داخل سترنق ووضعت قبلها li1_$ ماذا يعني هذا الشي؟

بتاريخ 11 دقائق مضت قال Shahad Mohammad:

شكرا جدا واضح، بس ممكن تشرح لي ايش يعني هالعبارة `li1_${randomId}` 

randomId فهمت انها المتغير العشوايي لكن لماذا وضعتها داخل سترنق ووضعت قبلها li1_$ ماذا يعني هذا الشي؟

 

هذه العبارة مماثل للعبارة التالية li1_" + randomid"

"li1_" + randomid === `li1_${randomid}`

الحل الذي شاركته معك هو الافضل وهو الذي نستخدمه في بيئات العمل مثل react لأنه الابسط

لكن اذا احببت البقاء على حلك السابق فالمشكلة التي حدثت معك انك تقومين بالبحث عن كل ال span في الصفحة

  let delete_skil1 = document.querySelectorAll("span");

وهذا يشمل كل العناصر من نوع span في كل من list_li1_lL و list_li1_lR وعندها المشاكل 

 for (let i = 0; i < delete_skil1.length; i++) {
    delete_skil1[i].addEventListener("click", () => {
      // رغم المشكلة تبقى العبارة التالية صحيحة
      delete_skil1[i].parentElement.style.display = "none";
      // لكن العبارة هنا تصبح خاظئة
      list_2L.children[i].style.display = "none";
    });
  }

لأن المتغير (i) وهو ال index الخاص بال span يصبح لا يوافق ال index الخاص بالعنصر في القائمة  list_2L.children[i]

وبالتالي حتى نتغلب على المشكلة نقوم بتحديد ال querySelectorAll فيكون الحل كالتالي

let delete_skil1 = document.querySelectorAll("#list_li1_R li span");
  for (let i = 0; i < delete_skil1.length; i++) {
    delete_skil1[i].addEventListener("click", () => {
      delete_skil1[i].parentElement.style.display = "none";
      list_2L.children[i].style.display = "none";
    });
  }

في هذه الحالة اصبح index الخاص بال span الذي نستخعيه من delete_skil1[i] متطابق مع ال index الخاص بالعنصر في القائمة الثانية والذي نستدعيه من list_2L.children[i]