Кнопка «Удалить» не работает ⇐ Javascript

[Anonymous]

Я создаю базовый трекер статистики с использованием HTML, CSS и JS для файтинга. Большая часть из них функциональна, я могу отслеживать, какие символы я использовал и выиграл ли я или проиграл, но теперь я пытаюсь добавить кнопку удаления к каждому совпадению, которое было ранее сохранено и отображается на экране, и сталкиваюсь с проблемами. Мне удалось заставить эту функцию работать, когда я щелкнул поле, в котором находился результат сопоставления, но не кнопку фактического удаления. Я попробовал добавить строку 55:
if (e.target.closest(".delBtn")) {

но теперь ничего не удаляется и ошибок не выдается. Что я делаю не так?



2KXO Tracker






2KXO Trackertt


Won or Lost?


Won
Lost


Choose Point Fighter

Fighter 1
Ahri
Yasuo
Ekko
Warwick
Teemo
Jinx
Braum
Illaoi
Vi
Blitzcrank
Darius


Choose Second Fighter

Fighter 2
Ahri
Yasuo
Ekko
Warwick
Teemo
Jinx
Braum
Illaoi
Vi
Blitzcrank
Darius

Save Match






body {
background-color: rgb(18, 18, 18);
color: rgb(204, 245, 100);
}

.results {
width: 100%;
padding: 10px;
text-align: center;
background-color: blue;
}

.results {
margin: 5px;;
border: 5px;
border-style: dashed;
}

p {
color:rgb(245, 100, 100);
border: 1px;
border-style: solid;
border-color:rgb(204, 245, 100);
padding: 2px;
}


//pull fighters and win/lose options selected by user from HTML for use/manipulation/storage in JS
const fighter1select = document.getElementById("fighter1");
const fighter2select = document.getElementById("fighter2");
const win = document.getElementById("win");

//adds listener to the HTMl element with saveBtn as ID and then runs the JS function myAlert when clicked
document.getElementById("saveBtn").addEventListener("click", myAlert);

//adds listener to run loadMatches func when page is loaded/reloaded
document.addEventListener("DOMContentLoaded", loadMatches);

//adds listener for a click on the results box and then runs deleteMatch func
document.getElementById("results").addEventListener("click", deleteMatch);

//parses local storage for an it called "matches" and sets that equal to the JS variable matches
function loadMatches() {
const matches = JSON.parse(localStorage.getItem("matches")) || [];
matches.forEach(displayMatches);
}
//loads previously saved matches, creates new match, pushes new match to the matches array, and then runs displayMatches to updated stats on screen
function myAlert(e) {
e.preventDefault();
//Loads any existing matches saved in local storage or creates a new/empty array titled 'matches'
const matches = JSON.parse(localStorage.getItem("matches")) || [];
//add a new match
const match = {
win: win.value,
fighter1: fighter1select.value,
fighter2: fighter2select.value,
id: Date.now(),
};
//push the new match to matches array
matches.push(match);
//runs the display matches function to add the new match to the screen
displayMatches(match);

localStorage.setItem("matches", JSON.stringify(matches));
}

function displayMatches(match) {
const para = document.createElement("p");
para.id = String(match.id)
para.textContent = `${match.win} | ${match.fighter1} & ${match.fighter2}`;

const deleteBtn = document.createElement("button");
deleteBtn.textContent = ("Delete Match")
deleteBtn.classList.add("delBtn")
deleteBtn.dataset.id = String(match.id);
para.appendChild(deleteBtn);
document.getElementById("results").appendChild(para);
};

function deleteMatch(e) {
if (e.target.closest(".delBtn")) {
const para = e.target.closest("p");
if (para && e.target.id === para.id) // Prevent deleting when clicking on the paragraph itself
{
para.remove();
const id = para.id;
let matches = JSON.parse(localStorage.getItem("matches")) || [];
matches = matches.filter(match => match.id !== id);
localStorage.setItem("matches", JSON.stringify(matches)); }

}
}


Подробнее здесь: https://stackoverflow.com/questions/798 ... functional