JavaScript: Wie kann ich die zwei "items" in dem div "movieDivs" entfernen?

Question

Hallo,

ich mache gerade die Hausaufgaben in IT und ich habe leider ein Problem. Das ist das letzte Problem, bevor meine Aufgabe erledigt ist. Also bitte, ich flehe euch an, helft mir.

Meine 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>

JavaScript findet ihr in den Kommentaren, der Code ist zu lang!

MEIN PROBLEM:

Mein Problem ist, dass wenn ich auf das Button "Delete Last" drücke, dann sollten zwei "items" in dem div "movieDivs" entfernt werden. Warum zwei? Weil ich mein Code von Anfang an unstrukturiert geschrieben habe, und deshalb gehören, das Bild und der Text zusammen. Aus diesem Grund, sollen auch der "Titel der Movie" und selbst das Movie (also img) zusammen gelöscht werden!

Ich habe schon alles ausprobiert, sodass ich jetzt gar keine Ideen mehr habe. Sogar diese KI - ChatGPT hat mir nicht geholfen! Ihr seid meine einzige Hoffnung!

Ich hoffe auf eure hilfreiche Antworten!

MfG

MrOsmo

MrOsmo · Answer

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(https://i.pinimg.com/564x/55/af/85/55af8508354f18b2ffbb325a36a3c2bb.jpg)";
        //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 = "";

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);
                }
            }
        }

JavaScript: Wie kann ich die zwei "items" in dem div "movieDivs" entfernen?

1 Antwort