Event Listeners w/my bookstore

JavaScript
1

“delete” d sdfmdkf mkdslfng ksdfgjn kldfnmgh kldfngh fgdh gf

2

Well, since every time you create a book there is no persistence (i.e. no db) , you would want to create some type of identifier for the book as you create it, then you can use that same identifier to delete it. Right now, all the books created are generically the same, so you can not delete a specific book. There are several ways to approach this, but let’s see what you come up with first…

4

sounds good, maybe even less verbose than what I was thinking, of course you’d still have to add some type of an identifier (class or id) to your trash can (span) so you can attach an event listener (like a click) to it right ?, anyway go for it and see how it works out…

6

Ok got it done with jquery so if you can convert to plain javascript will work as well … if i get a chance ill try and do it … Im just used to working with jquery.
(‘click’, ‘i’, function … the i here represents your tag for the icons and is important
and also add jquery to codepen … when its converted to plain javascript you can remove jquery

    $('#shelf').on('click', 'i', function(){
       var rem = $(this).closest('p');
    $(rem).remove();
            return false;
       });
7

ok heres a javascript version it adds a event handler to the div id shelf and if a ‘<i>’ tag is clicked it removes your book …

  shelf.addEventListener("click", function(e) {
    var target = e.target;
        if(target.tagName == 'I'){
        return target.parentNode.remove();
        }
  });
8

A new book is not clickable, because you only run the following code one time:

var trashCans = document.querySelectorAll("i");

Array.from(trashCans).forEach(function(trashcan) {
  trashcan.addEventListener("click", function(e) {
    const i = e.target.parentElement;
    i.parentNode.removeChild(i);
  });
});

When the page loads, you have your “first book” in the html section and so trashCans only has the “first book”. Hence, the only book with an addEventListener on it is “first book”.

There are two ways to solve this issue.

  1. Whenever a new book is added, you could use addEventListener to attach an event handler to it. The problem with this method is, if you added 100 books, there would be 100 event listeners which is a lot of overhead for the app.

  2. The better method is to use event delegation, so that you only have one event listener which “listens” to the entire collection of books (the div with id=“shelf”). Then, whenever a book is clicked, you check the event target to see if it is a trash can icon. If it is, then remove it. I have blurred out how this would be implemented below, in case you want to attempt to implement it on your own.

shelf.addEventListener("click", event => {
  if (event.target.classList.contains('fa-trash-o'))
    event.target.parentElement.remove();
});

UPDATE: It appears @JohnL3 beat me to a solution, but hopefully you understand why your original solution was not working.

13

No if you didnt declare shelf at the top of the file i then would have to do it before i could use shelf.

e.target is a object (e is a object e.target is html console.log it to see ) … so i assign its contents to var target … i can then check for things like tagName by doing if (target.tagName = ‘I’ or eg if it was span you clicked i would do if(target.tagName == ‘SPAN’) or do things like randelldawson did … i dont know much about the e.target but just enough to sort me out when i need to do something like this … else i just google event.target and see what comes up.
Also if you didnt want to delete all the books … eg maybe the first couple should not be able to be deleted you probably could give any that are added to the dom a class eg del and then target only those with a class of del … but you wouldnt use tagName … you probably would need to look up another parameter to use … had a quick look and think if(target.className === ‘name of class’) would work.

14

shelf.addEventListener(“click” … this adds an event listener of type click on the div with id of shelf … the e in the function is just short for event … so e is a object of information on the event … if you console.log(e.target) you get ‘’<i class=‘fa fa-trash-o fa-2x’>’'
if you console.log(e) you get a big object back … try it out and go to dev tools and open the object and see whats in it …
so when you click on the trash icon you are actually triggering the eventlistener on the div id of shelf … because the trash icon is inside the div … thats why you … if(target.tagName == ‘I’){ use this line to check if you clicked on the icon in the div if so you can delete it … if you had clicked on the paragraph within the div it wouldnt match and book wouldnt be deleted.
hope this helps im not great at explaining things lol

16