SeiferLoire Posted February 2, 2020 Share Posted February 2, 2020 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 More sharing options...
HartleySan Posted July 24, 2021 Share Posted July 24, 2021 (edited) 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 July 24, 2021 by HartleySan Link to comment Share on other sites More sharing options...
drakebohan Posted November 15, 2021 Share Posted November 15, 2021 You can use the arrayObject.filter() method to remove elements from an array at specific index in JavaScript. var rValue = 'three' var arrayItems = ['one', 'two', 'three', 'four', 'five', 'six'] arrayItems = arrayItems.filter(item => item !== rValue) console.log(arrayItems) Link to comment Share on other sites More sharing options...
Recommended Posts