Going through each child in a div generated from API in javascript

Question

I'm trying to access and delete the child in a div generated when I press the "submit" button, the individual divs inside will be generated because there are some functions running with the click, but when I press refresh to delete them nothing happened.

For more clarification here's the src: https://github.com/espnal/wdd230-final-project/blob/main/javascript/js.js

(This is my first post here if you have any suggestions I'm open)

const refresh = document.querySelector("#refresh");
const form = document.querySelector("#form-1");
const contentDiv = document.querySelector(".contentdiv");
const input = document.querySelector("#form-1 input");

//There're another two function like this one below
function firstItemF(list, city) {
  let firstItem = list[0]
  let dayweather = "Sunday"
  const icon = `https://openweathermap.org/img/wn/${firstItem.weather[0]["icon"]}@2x.png`;

  let individualDiv = document.createElement("Div")
  individualDiv.className = "individual"

  let description = document.createElement("p")
  description.innerHTML = firstItem.weather[0].description;

  let day = document.createElement("h4")
  day.innerHTML = dayweather

  let temperature = document.createElement("p")
  let kelvin = firstItem.main.temp.toFixed(0);
  let f = 9 / 5 * (kelvin - 273) + 32;
  temperature.innerHTML = `Current temperature: ${f}℉`

  let hum = document.createElement("p")
  hum.innerHTML = `${firstItem.main.humidity}%`

  let img = document.createElement('img');
  img.setAttribute('src', icon);
  img.setAttribute('alt', "icon");
  img.setAttribute('loading', 'lazy');

  individualDiv.appendChild(img);


  individualDiv.appendChild(day);
  individualDiv.appendChild(description);
  individualDiv.appendChild(temperature);
  individualDiv.appendChild(hum);
  contentDiv.appendChild(individualDiv);

}


form.addEventListener("submit", e => {
  e.preventDefault();

  const inputVal = input.value;
  const urlForecast = `https://api.openweathermap.org/data/2.5/forecast?q=${inputVal}&appid=${myKey}`;
  fetch(urlForecast)
    .then((response) => response.json())
    .then((object) => {
      console.log(object);
      const {
        city,
        list
      } = object;

      let title = document.createElement("h3");
      title.innerHTML = `${city.name}, ${city.country}`
      titleDiv.appendChild(title);

      //im using this one for the example
      firstItemF(list, city)

      SecondItemF(list, city)
      ThirdItemF(list, city)
    })
});
//Here is the problem
refresh.addEventListener("click", (e) => {
  contentDiv.classList.remove("individual");
})

<form id="form-1">
  <button type="submit">SUBMIT</button>
  <i id="refresh" class="fa-solid fa-arrow-rotate-right"></i>
  <input id="input-s2" type="text" placeholder="Search for a city" autofocus>
  <div class="cards-container">
    <div class="contentdiv">
    </div>
  </div>
</form>

Answer 1

You need to use a linter like this one: https://jshint.com Your code needs a ton of semi-colons and you're missing a bracket and parenthesis }) that .fetch() or submit handler needs. I edited your question just so it doesn't irritate anyone trying to answer the question. You'll see the comment at the bottom of this example showing where I added it, but I guessed because there's no way to test it since there's no key for the API (but not expecting one, so worries there).

Besides that problem, the solution for the problem addressed in the question is the following:

Remove:

contentDiv.classList.remove("individual");

And add:

contentDiv.replaceChildren();

Removing a class doesn't remove the actual elements (well normally unless there's some very convoluted logic going on). .replaceChildren(); without a parameter will remove everything within contentDiv, but if you nee to just remove .individual do the following:

document.querySelector('.individual').remove();

const refresh = document.querySelector("#refresh");
const form = document.querySelector("#form-1");
const contentDiv = document.querySelector(".contentdiv");
const input = document.querySelector("#form-1 input");

//There're another two function like this one below
function firstItemF(list, city) {
  let firstItem = list[0];
  let dayweather = "Sunday";
  const icon = `https://openweathermap.org/img/wn/${firstItem.weather[0].icon}@2x.png`;

  let individualDiv = document.createElement("Div");
  individualDiv.className = "individual";

  let description = document.createElement("p");
  description.innerHTML = firstItem.weather[0].description;

  let day = document.createElement("h4");
  day.innerHTML = dayweather;

  let temperature = document.createElement("p");
  let kelvin = firstItem.main.temp.toFixed(0);
  let f = 9 / 5 * (kelvin - 273) + 32;
  temperature.innerHTML = `Current temperature: ${f}℉`;

  let hum = document.createElement("p");
  hum.innerHTML = `${firstItem.main.humidity}%`;

  let img = document.createElement('img');
  img.setAttribute('src', icon);
  img.setAttribute('alt', "icon");
  img.setAttribute('loading', 'lazy');

  individualDiv.appendChild(img);


  individualDiv.appendChild(day);
  individualDiv.appendChild(description);
  individualDiv.appendChild(temperature);
  individualDiv.appendChild(hum);
  contentDiv.appendChild(individualDiv);

}


form.addEventListener("submit", e => {
  e.preventDefault();

  const inputVal = input.value;
  const urlForecast = `https://api.openweathermap.org/data/2.5/forecast?q=${inputVal}&appid=${myKey}`;
  fetch(urlForecast)
    .then((response) => response.json())
    .then((object) => {
      console.log(object);
      const {
        city,
        list
      } = object;

      let title = document.createElement("h3");
      title.innerHTML = `${city.name}, ${city.country}`;
      titleDiv.appendChild(title);

      //im using this one for the example
      firstItemF(list, city);
      SecondItemF(list, city);
      ThirdItemF(list, city);
    });
});// <= This is missing 

//Here is the problem
refresh.addEventListener("click", (e) => {
  contentDiv.replaceChildren();
});

<form id="form-1">
  <button type="submit">SUBMIT</button>
  <i id="refresh" class="fa-solid fa-arrow-rotate-right"></i>
  <input id="input-s2" type="text" placeholder="Search for a city" autofocus>
  <div class="cards-container">
    <div class="contentdiv">
    </div>
  </div>
</form>