I'm creating a small landing page that, at the end, is going to pick a random city stored between a choice that the user inputs choose where to go for the next trip. When the user inputs the city name inside the input field, everything is ok, a new list element is created inside the ordered list and the name is pushed into the array (for later on randomly choose between one). But when I'm trying to remove the city name with the close function, the list element correctly disappears, but inside the array, instead of removing the selected item, it removes the object on position 0. I'm trying to figure out what's wrong with my code. Below, the code that I've written so far:

```js
const submitBtn = document.querySelector(".addCity");
const cityList = document.querySelector(".city-ol");
let createdLi = document.getElementsByTagName("li");
const lis = document.querySelectorAll(".city-ol li");
let array = [];
submitBtn.addEventListener("click", newElement);

function newElement() {
  let li = document.createElement("li");
  let inputValue = document.querySelector(".inputTextField");
  let t = document.createTextNode(inputValue.value);
  li.appendChild(t);

  if (inputValue.value === "") {
    alert(
      "Attenzione, il campo di inserimento della città è vuoto. Inserire una città."
    );
  } else {
    cityList.appendChild(li);
    array.push(inputValue.value);
    inputValue.value = "";
  }
  var span = document.createElement("SPAN");
  var txt = document.createTextNode("\u00D7");
  span.className = "close";
  span.appendChild(txt);
  li.appendChild(span);

  var close = document.getElementsByClassName("close");
  var i;
  for (i = 0; i < close.length; i++) {
    close[i].onclick = function() {
      let div = this.parentElement;
      div.style.display = "none";
      array.splice(close[i], 1);
    };
  };
};
```

```css
body {
  font-family: "Poppins", sans-serif;
  height: 900px;
  text-align: center;
}

#landing-section {
  height: 100%;
}

.container {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(6, 1fr);
  gap: 5px;
  justify-content: center;
  align-content: center;
}

.header {
  /* background-color: #935ee9; */
  grid-column: 1 / -1;
  border: 1px solid #000000;
}

.main-head {
  font-size: 3rem;
  text-transform: uppercase;
  margin-bottom: 0;
}

.main-para {
  font-size: 1.2rem;
  margin-top: 10px;
}

.cityInput {
  display: flex;
  justify-content: center;
  align-items: center;
  /* background-color: #a8d051; */
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  border: 1px solid #000000;
}

.inputTextField {
  width: 200px;
}

.cityList {
  display: flex;
  justify-content: center;
  align-items: center;
  /* background-color: #a98649; */
  grid-column: 1 / 2;
  grid-row: 3 / -1;
  width: 100%;
  border: 1px solid #000000;
}

.city-ol {
    font-size: 1.5rem;
    width: 100%;
}

.city-ol li:nth-child(odd) {
    background: #f9f9f9;
  }

li {
  margin: 5px 20px;
}

.close {
    position: relative;
    top: 3px;
    float: right;
  }

  .close:hover {
    background-color: #DCDCDC;
    color: white;
  }

.cityImage {
  /* background-color: #14d50e; */
  grid-column: 2 / -1;
  grid-row: 2 / -1;
  border: 1px solid #000000;
}
```

```html
<section id="landing-section">
  <div class="container">
    <div class="header">
      <h1 class="main-head">Make That Trip</h1>
      <p class="main-para">Are we ready to choose our next trip?</p>
    </div>
    <div class="cityInput">
      <input class="inputTextField" type="text" value="" data-type="city" placeholder="Inserisci la meta">
      <button class="addCity">Aggiungi</button>
    </div>
    <div class="cityList">
      <table>
        <ol class="city-ol">
        </ol>
      </table>

    </div>
    <div class="cityImage">City Image</div>
  </div>
</section>
```