Jump to content
Larry Ullman's Book Forums

removing object from array using click event


Recommended Posts

Hello, i'm new to javascript and currently in a bootcamp course to become a software developer. that being said there are a lot of new ideas that have been thrown at me in the past couple weeks and i'm having trouble completing our assignment for the week.

I've been tasked with creating a site that takes an input and pushes it into an array and when a button is clicked that array gets made into a card that houses a name, a hogwarts house and a button. the button on these cards needs to be able to delete the card that the button is on. I've been able to do everything up until this point. i. can't get the button to only delete one card. it deletes every card, and even when i get the button to delete one card it won't delete any other card. how do i get this to work? I'll post my code so that gives better context.

//html below

<!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>
</html>









//css below

body {
    background-color: slategray;
}

#form{
    display: none;
}

.expel{
    background-color: blueviolet;
    padding: 15px 30px;
}

a{
    list-style-type: none;
    color: white;
}
a:hover{
    list-style-type: none;
    color: white;
}








//javascript below
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)
    
};

//make function for expel students events
//loops over all of the expel buttons
//adds the remove student function to each button
//need remove student function
//remove student with the id that is equal to the id of the button, e.target.id

//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();

any advice or solutions you can give would be most welcome.

Link to comment
Share on other sites

  • 1 year later...

Hey, Seifer, replying way after the fact.

As a general flow, you'll probably want to have a function that renders all the cards based on what's in the array, another function for adding items to the array and a third function for deleting things.

Lots of pseudo-code here, but the render function would be something like the following:

const render = () => {
    let html = '';

    html += '<ul>';

    items.forEach((item) => {
        html += `<li>
            // More HTML here for each card
        </li>`;
    });

    html += '</ul>';

    document.querySelector('wherever-you-want-to-put-the-html').innerHTML = html;
};

Then, every time a change is made to the items array, you simply call the render function and it does everything for you. This is very similar to how React/Vue, etc. work behind the scenes.

The add and remove functions would be something like the following:

const add = (item) => {
    items.push(item);
    render();
};

const remove = (idx) => {
    items = items.filter((item, i) => i !== idx);
    render();
};

Again, being very rough here, but that's the basic flow, and everything else goes around this. You can style things and add whatever functionality you want on top of this. Good luck!

Edited by HartleySan
Link to comment
Share on other sites

  • 3 months later...
 Share

×
×
  • Create New...