JavaScript Hangi Elemana Tıkladığımı Nasıl Algılatabilirim
JS ile todo uygulaması geliştiriyorum. Ard arda elemanları ekletebiliyorum ama silme işlemine geldiğimde hangi elamana tıkladığımı nasıl algılatabilirim?
Bu kodlar ile eleman oluşturuyorum.
function createLiElement(val) {
return `
<li class="task-item">
<span class="task-time">${day}.${month}.${year} - ${hour}:${minute}</span>
${val}
<span class="icons">
<i id="trash" class="fa-solid fa-trash"></i>
<i id="edit" class="fa-solid fa-pen"></i>
</span>
</li>
`;
}
Bu kodlarla tıkladığım elemanın bilgisini almaya çalışıyorum ama sadece 1. elemanın bilgisini alabiliyorum. 3 eleman olduğunu varsayın, sadece 1. elemanın bilgileri geliyor. 2. ve 3. elemana tıkladığımda bilgi alamıyorum.
function deleteLiElement(element) {
console.log(element);
}
deleteBtn.addEventListener("click", (e) => {
deleteLiElement(e.target.parentElement.parentElement);
});
Bilgisi olan varsa yardımcı olabilir mi?
Soru hatalı mı? 👎
Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!
Cevaplar (2)
Merhaba olay dinleyicini tıkladığın elemente değil parent elemente ata sayfaya sonradan ekleme yaptığın için olay dinleyicin sonradan eklenenlerde çalışmaz.
<ul id="parent">
<li class="eventClick">Item 1</li>
</ul>
const parentEl = document.getElementById("parent");
parentEl.addEventListener("click", (e) => {
if(e.target.closest(".eventClick")){
deleteLiElement(e.target.parentElement.parentElement);
}
});
});
