How to remove an object from an array using click events

I am new to javascript and am in need of some assistance. I've attempted to look this up all week and can't seem to grasp the concept. I have written some code that allows me to create cards using innerhtml(). these cards grab all the necessary information from an array. I've made it to where the cards will be deleted once the button on said cards is clicked, however it deletes all of the cards and I need it to delete the cards individually when the buttons are clicked.. forgive my terminology and lack of understanding. here is my javascript code.

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/[email protected]/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>

any suggestions or solution would be greatly appreciated. thank you

Solution

You are assigning student.length = 0. Your if-statement should look like:

if(students.length == 0){}.

Your expelStudentEvent function deletes your cards, because it deletes everything based on the length of your cards.

Try something like this:

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(${i})" id="${sortingHat[i].id}" href="#" class="expel">Expel</a>`
    domString +=        `</div>`
    domString +=    `</div>`
    domString +=    `</div>`
}

printToDom('studentCard', domString)

};

const expelStudentEvent = (index) => {
    students.splice(index,1);
    sortBuilder(students);
};