CRUD operations on DOM elements?

JavaScript
1

Hi everybody, I have a project set up on Heroku using Express, Nodejs, and MongoDB where you can request an image of the sky above your current location. If you register, you can save those images in an image gallery displayed on your account’s page, which works by adding the image src to a “saved” array in each document representing the user.

I added a “Delete All” button that erases the entire gallery at once, but don’t know how to approach allowing the user to delete them individually? Is there a way to store the index of each image so that a user can click on one image and delete them?

Also as a follow up question, is there a way to delete the images without refreshing the page? Currently the “Delete All” button reloads the page after deleting the image array field in MongoDB.

Here is the project link:
https://google-cloud-view.herokuapp.com/

Code:
https://github.com/tespin/google-cloud-view

And you can also use the following credentials on the project itself:
user: admin
pass: password

Thank you! Please let me know if I can clarify anything.

2

Hi I’m never use mongoDB but im looking your code and if I am understand it well maybe the most simple solution would be to add and id to each image or even let the user to introduce the “title” or the day they get the picture and then when charged into html charge also that attribute as a parameter of the image.
For the user approach you can add a litle red paper bin on the title of each img with a click event that get the id in order to make the petition to mongo, or make a button that lets select several images and then delete those images.
Dont know if it will work on mongo cause i’ve always worked on relational but that will be my approach to the case

edit because i have bad english and its cleaner :

  1. when users load and image add an id.

2.store that id (not necesary have to be “id” word can be name or whatever)

  1. load it in the general view

  2. use as attribute in onclick event to target the img

  3. pass that id to the database with a delete order

pd: Good job, looks awesome!

3

@jesusMAes thanks for walking me through this! I have a better intuition about this issue now. I’m storing the index in a data attribute because that seemed to make sense semantically. I think I can pass that to mongo and use $arrayElemAt to delete from there.

Haven’t decided yet which approach I want on the user end but i’ll post an update once it’s working! Thanks for the compliment, this is my first “serious” coding project so it’s appreciated :slightly_smiling_face:

1 Like
4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.