Я новичок в javascript и мне нужна помощь. Я пытался искать это всю неделю, и мне не кажется, что эта идея не подходит. Я написал некоторый код, который позволяет мне создавать карты, используя innerhtml(). Эти карты собирают всю необходимую информацию из массива. Я сделал это, где карты будут удалены после нажатия кнопки на указанных картах, однако он удаляет все карты, и мне нужно, чтобы удалить карты по отдельности, когда кнопки нажимаются ... простите мою терминологию и отсутствие понимание. вот мой javascript код.
console.log("HelloWorld!");
//print to dom function for innerhtml
const printToDom = (divId, textToPrint) => {
console.log(textToPrint);
const selectedDiv = document.getElementById(divId);
selectedDiv.innerHTML = textToPrint
};
//this is my hogwarts array
const hogwartsHouse = [
'Griffindor', 'Hufflepuff', 'Slytherin', 'Ravenclaw'
];
//this variable grabs the users input into my form
const names = document.getElementById("insertName");
//this variable sets the student id to 0
//student id is located inside the sort init function
let studentId = 0;
const students = [];
//this function allows my form to be seen
function openForm() {
x = document.getElementById("form");
if(x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
};
//this function builds the card
const sortBuilder = (sortingHat) => {
let domString = '';
for(let i = 0; i < sortingHat.length; i++){
domString += `<div id="cardContainer">`
domString += `<div class="card" style="width: 18rem;">`
domString += `<div class="card-body">`
domString += `<h5 class="cardTitle">${sortingHat[i].name}</h5>`
domString += `<p class="card-text">${sortingHat[i].house}</p>`
domString += `<a onclick="expelStudentEvent()" id="${sortingHat[i].id}" href="#" class="expel">Expel</a>`
domString += `</div>`
domString += `</div>`
domString += `</div>`
}
printToDom('studentCard', domString)
};
//pass in id of the card i'm clicking
//i want this function to delete 1 card when the button on said card is clicked
const expelStudentEvent = () => {
let domString = '';
for(let i = 0; i < students.length; i++){
domString += ``
} if(students.length = 0){}
console.log(students)
printToDom('studentCard', domString);
};
//this function takes my users input into the form and my hogwarts array into an array that gives each input an id
const sortInit = (e) => {
const student = {
id: studentId,
name: names.value,
house: hogwartsHouse[Math.floor(Math.random() * hogwartsHouse.length)],
}
students.push(student);
console.log(students);
studentId++;
sortBuilder(students);
};
// const removeCard = () => {
// let myCard = document.getElementById(e.target.id);
// }
//this function holds my event listeners
const events = () =>{
document.getElementById('sort').addEventListener('click', sortInit)
document.getElementById(e.target.id).addEventListener('click', expelStudentEvent)
}
//this function holds all of the previous functions
const init = () => {
openForm();
sortBuilder(students);
events(students)
expelStudentEvent(e)
sortInit(expelStudentEvent)
};
//this function executes all functions
init();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div id="jumbo" class="jumbotron">
<h1 class="display-4">Sorting Hat</h1>
<p class="lead">Hello muggles, are you a big fan of Harry Potter? </p>
<hr class="my-4">
<p>Well you are in luck. Now you will be able to use this website to try on the sorting hat and see which house you will be sorted into.</p>
<p class="lead">
<a id="initForm" class="btn btn-primary btn-lg" onclick="openForm();" href="#" role="button">Lets Get It Started!</a>
</p>
</div>
<div id="form">
<form class="form-inline">
<h3 class="display-6">Enter First Year's Name</h3>
<div class="form-group mx-sm-3 mb-2">
<label for="insertName" class="sr-only">name</label>
<input type="text" class="form-control" id="insertName" placeholder="Harry Potter">
</div>
<button id="sort" type="submit" class="btn btn-primary mb-2">Sort</button>
</form>
</div>
<div id="studentCard"></div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<!--<script src="main.js"></script>-->
</body>
Любые предложения или решения будут с благодарностью. спасибо