JavaScript: How can I remove the two "items" in the div "movieDivs"?

ByMrOsmo

Hello,

I'm currently doing my IT homework, and unfortunately, I have a problem. This is the last problem before my assignment is finished. So please, I beg you, help me.

My codes:

HTML:

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My favourite movies</title> <script defer src="./script.js"></script> </head> <body> </body> </html>

You can find JavaScript in the comments, the code is too long!

MY PROBLEM:

My problem is that when I click the "Delete Last" button, two "items" in the "movieDivs" div should be removed. Why two? Because I wrote my code unstructured from the start, and therefore the image and text belong together. For this reason, the "Movie Title" and the movie itself (i.e., the image) should also be deleted together!

I've tried everything, so I'm out of ideas now. Even this AI – ChatGPT – didn't help me! You're my only hope!

I hope for your helpful answers!

Kind regards

MrOsmo

(1 votes)
Loading...

Similar Posts

PowerShell / REST Microsoft Azure: Get-AzPolicyStateSummary?

ByDultus, UserMod Light

Good morning! I would like to report the current status of policy compliance in a subscription. So I pull the following data: $azState = Get-AzPolicyStateSummary -SubscriptionId $subscriptionId $exportObject.Compliance.TotalRessources = $azState.Results.ResourceDetails[0].Count + $azState.Results.ResourceDetails[1].Count + $azState.Results.ResourceDetails[2].Count $exportObject.Compliance.CompliantRessources = $azState.Results.ResourceDetails[0].Count $exportObject.Compliance.NonCompliantRessources = $azState.Results.ResourceDetails[1].Count $exportObject.Compliance.Exceptions = $azState.Results.ResourceDetails[2].Count $exportObject.Compliance.Percentage = [math]::Round((1.0 – $exportObject.Compliance.NonCompliantRessources / ($exportObject.Compliance.CompliantRessources + $exportObject.Compliance.NonCompliantRessources + $exportObject.Compliance.Exceptions)) *…

Subscribe
Notify of
2 Answers
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
MrOsmo
Author
MrOsmo
1 year ago

JavaScript:

const title = document.createElement("h1");
        title.textContent = "My favourite movies!";
        document.body.appendChild(title);

        const inputOne = document.createElement("input");
        document.body.appendChild(inputOne);
        inputOne.placeholder = "Enter a movie name!";

        const inputTwo = document.createElement("input");
        document.body.appendChild(inputTwo);
        inputTwo.placeholder = "Add a link!";

        const buttonsDiv = document.createElement("div");
        document.body.append(buttonsDiv);

        const addMovieButton = document.createElement("button");
        addMovieButton.textContent = "Add this movie!";
        buttonsDiv.appendChild(addMovieButton);

        const otherButtonsDiv = document.createElement("div");
        document.body.append(otherButtonsDiv);

        const deleteLastMovieButton = document.createElement("button");
        deleteLastMovieButton.textContent = "Remove last!";
        otherButtonsDiv.appendChild(deleteLastMovieButton);

        const deleteAllMoviesButton = document.createElement("button");
        deleteAllMoviesButton.textContent = "Remove all!";
        otherButtonsDiv.appendChild(deleteAllMoviesButton);

        const movieDivs = document.createElement("div");
        document.body.append(movieDivs);

        document.body.style.backgroundImage = "url(comment image)";
        //TITLE_STYLE
        title.style.textAlign = "center"
        title.style.fontSize = "3rem"
        title.style.fontFamily = "'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif"
        title.style.color = "#fff"


        //INPUT_ONE_STYLE
        inputOne.style.width = "50%"
        inputOne.style.height = "35px"
        inputOne.style.marginLeft = "24%"
        inputOne.style.marginTop = "10%"
        inputOne.style.borderRadius = "7px"
        
        
        //INPUT_TWO_STYLE
        inputTwo.style.width = "50%"
        inputTwo.style.height = "35px"
        inputTwo.style.marginTop = "13px"
        inputTwo.style.marginLeft = "24%"
        inputTwo.style.borderRadius = "7px"
        
        
        //BUTTON_DIV_STYLE
        buttonsDiv.style.marginLeft = "355px"
        buttonsDiv.style.marginTop = "20px"
        
        
        //ADD_MOVIE_BUTTON_STYLE
        addMovieButton.style.width = "13%"
        addMovieButton.style.height = "30px"
        addMovieButton.style.background = "linear-gradient(45deg, rgba(201,37,107,1) 15%, rgba(116,16,124,1) 75%)";
        addMovieButton.style.color = "#fff"
        addMovieButton.style.fontWeight = "600"
        addMovieButton.style.borderRadius = "7px"
        addMovieButton.style.border = "#fff"
        addMovieButton.style.cursor = "pointer"
        
        
        //OTHER_BUTTONS_DIV_STYLE
        otherButtonsDiv.style.marginLeft = "355px"
        otherButtonsDiv.style.marginTop = "25px"


        //REMOVE_LAST_MOVIE_BUTTON
        deleteLastMovieButton.style.width = "11%"
        deleteLastMovieButton.style.height = "30px"
        deleteLastMovieButton.style.background = "linear-gradient(45deg, rgba(201,37,107,1) 15%, rgba(116,16,124,1) 75%)";
        deleteLastMovieButton.style.color = "#fff"
        deleteLastMovieButton.style.fontWeight = "600"
        deleteLastMovieButton.style.borderRadius = "7px"
        deleteLastMovieButton.style.border = "#fff"
        deleteLastMovieButton.style.cursor = "pointer"


        //REMOVE_ALL_MOVIES_BUTTON
        deleteAllMoviesButton.style.width = "11%"
        deleteAllMoviesButton.style.height = "30px"
        deleteAllMoviesButton.style.background = "linear-gradient(45deg, rgba(201,37,107,1) 15%, rgba(116,16,124,1) 75%)";
        deleteAllMoviesButton.style.color = "#fff"
        deleteAllMoviesButton.style.fontWeight = "600"
        deleteAllMoviesButton.style.borderRadius = "7px"
        deleteAllMoviesButton.style.border = "#fff"
        deleteAllMoviesButton.style.cursor = "pointer"
        deleteAllMoviesButton.style.marginLeft = "15px"

        addMovieButton.onclick = async () => {
            const pictureLinkAdd = inputTwo.value;
            const textAdd = inputOne.value;

            

            if (pictureLinkAdd && textAdd) {
                try {
                    const response = await fetch('https://crudcrud.com/api/c74c6269d5c245c3bbe96bec091fc01d/movies', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                        },
                        body: JSON.stringify({ pictureLink: pictureLinkAdd, text: textAdd }),
                    });

                    const data = await response.json();

                    const pictureAdd = document.createElement("img");
                    pictureAdd.src = data.pictureLink;
                    movieDivs.appendChild(pictureAdd);

                    pictureAdd.style.height = "350px"
                    pictureAdd.style.width = "250px"
                    pictureAdd.style.display = "flex"
                    pictureAdd.style.flexDirection = "column"
                    pictureAdd.style.marginTop = "315px"
                    pictureAdd.style.marginLeft = "355px"

                    const textAdding = document.createElement("h3");
                    textAdding.innerHTML = data.text;
                    movieDivs.appendChild(textAdding)

                    textAdding.style.marginLeft = "650px"
                    textAdding.style.marginTop = "-360px"
                    textAdding.style.fontSize = "50px"
                    textAdding.style.color = "#fff"
                    textAdding.style.fontFamily = "'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif"
                } catch (error) {
                    console.error('Error:', error);
                }

                inputTwo.value = ""
                inputOne.value = ""
            }
        };

        deleteAllMoviesButton.onclick = async () => {
          try {
              const response = await fetch('https://crudcrud.com/api/c74c6269d5c245c3bbe96bec091fc01d/movies');
              const data = await response.json();
      
              if (data.length > 0) {
                  movieDivs.innerHTML = "";

                  const movieIds = data.map(movie => movie._id);
      
                  await fetch('https://crudcrud.com/api/c74c6269d5c245c3bbe96bec091fc01d/movies', {
                      method: 'DELETE',
                      headers: {
                          'Content-Type': 'application/json',
                      },
                      body: JSON.stringify({ ids: movieIds }),
                  });
              }
          } catch (error) {
              console.error('Error:', error);
          }
      };
      

        deleteLastMovieButton.onclick = async () => {
            const lastMovie = movieDivs.lastChild;
            const another = movieDivs.lastChild

            if (lastMovie) {
                try {
                    const response = await fetch('https://crudcrud.com/api/c74c6269d5c245c3bbe96bec091fc01d/movies');
                    const data = await response.json();

                    if (data.length > 0) {
                        const lastItemId = data[data.length - 1]._id

                        await fetch(`https://crudcrud.com/api/c74c6269d5c245c3bbe96bec091fc01d/movies/${lastItemId}`, {
                            method: 'DELETE',
                        });

                        movieDivs.removeChild(lastMovie);

                        if(lastMovie) {
                            movieDivs.removeChild(another)
                        }
                        
                    }
                } catch (error) {
                    console.error('Error:', error);
                }
            }
        }
0
MrOsmo
Author
MrOsmo
1 year ago
Reply to  MrOsmo

GUYS, I HAVE FINALLY DONE IT; THANK YOU FOR YOUR EFFORTS! AND I'M SORRY THAT I HAVE… PLEASE FORGIVE ME.

0