حذف العنصر المقابل من القائمتين المتشابهتين جافاسكربت HTML

Shahad Mohammad · 22 مايو 2022

لدي قائمتين غير مرتبتين ul، واريد عند الضغط على عنصر x من القائمة الأولى يتم حذف العنصر الذي يمتلك نفس فهرس x من القائمة الثانية. كيف اقوم بذلك؟ كتبت الكود ولكن لم استطع اكمال الجزء الخاص بحذف العصنر بالقائمة الثانية

function subL()
    {
         var user_skil = document.getElementById('user_skil').value;
          let  listNodex = document.getElementById('list_li');
          let  liNode = document.createElement("LI");
          let  txtNode = document.createTextNode(user_skil);
    
          liNode.appendChild(txtNode);
          listNodex.appendChild(liNode);

          let  listNodex1 = document.getElementById('list_li1');
          let  liNode1 = document.createElement("LI");
          let  txtNode1= document.createTextNode(user_skil);

          liNode1.appendChild(txtNode1);
          listNodex1.appendChild(liNode1); 

    
         let myspan1 = document.createElement('span')
          myspan1.innerHTML="x";
          liNode.appendChild(myspan1);
          let delete_skil1 = document.querySelectorAll('span');
          for(let i=0; i<delete_skil1.length;i++){
          delete_skil1[i].addEventListener('click', ()=>{
         delete_skil1[i].parentElement.style.display ="none";
  
 //////////////////////////////////////////////////////////////////
 
        
       })  
   }
    
    }

Wael Aljamal · 22 مايو 2022

لديك المصفوفة delete_skil1 فيها عدة عناصر قائمة و كل عنصر منها فيه بيانات + عنصر span

إن كانت القائمتين فيها نفس البنية يمكن عمل التعديل التالي:

let delete_skill_1 = document.querySelectorAll('#list_1 span'); // الرئيسية

let delete_skill_2 = document.querySelectorAll('#list_2 span'); // الثانية

ثم لكل عنصر من الأولى نقوم بإسناد مستعم نقر يخفي العنصر المقابل له من الثانية

for(let i=0; i<delete_skill_1.length;i++){
  delete_skill_1[i].addEventListener('click', ()=>{
    delete_skill_1[i].parentElement.style.display ="none";
    delete_skill_2[i].parentElement.style.display ="none";
  })
}

طالما نفس الهرمية ضمن القائمة نستطيع عمل نفس التعديل لنفس هرمية العناصر.

تأكدي من وضع id مناسب لكل منهم و الاهتمام بالتسمية وإضافة span لأنه صلة الوصل.

من الأفضل فصل عملية إضافة العقد عن الحذف

عمر قره محمد · 23 مايو 2022

حسب ما فهمت انه المطلوب من خلال السؤال الخاص بك

(عند النقر على العنصر في القائمة الاولى يتم حذف العنصر الموافق من القائمة الثانية دون ان ينحذف العنصر من القائمة الاولى)

يكون الحل الصحيح بالشكل التالي

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);
  //randomId  قمت بتوليد
  const randomId = Math.floor(Math.random() * 1000);
  // في البداية li2 قمت بتعريف
  // لأنني بحاجة لان ايكون هذا العنصر موجود كي اقوم بالاشارة إليه عند وضع الوظيفة الخاصة بالحذف في العنصر الثاني
  let data2 = document.createTextNode(user_skil);
  let li2 = document.createElement("LI");
  li2.appendChild(data2);
  li2.id = `li2${randomId}`;
  list_2L.appendChild(li2);

  let li = document.createElement("LI");
  li.appendChild(data);
//   قمت بإضافة وظيفة الحدذف التي تشير للأيدي الذي قمت بتعريفه
  li.onclick = () => {
    document.getElementById(`li2${randomId}`).remove();
  };
  list_1L.appendChild(li);

  document.getElementById("user_skil").value = "";
}

ما فعلته انا هو انني عرفت ال li2 في البداية ثم اعطيت id قمت بتوليده بشكل عشوائي لل li2 عند تعريفه

  const randomId = Math.floor(Math.random() * 1000);

  li2.id = `li2${randomId}`;

وبعد ذلك قمت بإعطاء onClick لل li عند تعريفه حيث اقوم بالاتيان بال li2 من خلال ال id المعطى نفسه ثم اقوم بحدثه remove()

li.onclick = () => {
    document.getElementById(`li2${randomId}`).remove();
  };

كما قمت باضافة السطر

  document.getElementById("user_skil").value = "";

من اجل تفريغ ال input بعد إضافة العنصر حتى لا يطر المستخدم للحذف ثم الكتابة إذا أراد إضافة عنصر جديد

حذف العنصر المقابل من القائمتين المتشابهتين جافاسكربت HTML

السؤال

Shahad Mohammad

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

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

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

Recommended Posts

Wael Aljamal

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

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

عمر قره محمد

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

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

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية