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:

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

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

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

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Problem FIX can be put 2 ways

1. When you are adding any any new element all 'close' on dom are added to close[]

Here element is present on DOM, Which get audited during add Element
   let div = this.parentElement;
   div.style.display = "none"; 

FIX: Remove it from DOM
   let elm = this.parentElement;
   elm.remove();

2. During loop execution i variable will be incrementing as 1 2 3... but it wont be same during function execution

FIX : Delecare i using let 
   for (let i = 0; i < close.length; i  ) {

CodePudding user response：

Thanks to all of your answers I was able to figure out and fix the problem, I will explain it below:

1. Here I've isolated the text content of the list without the span, so that it matches exactly to the array objects

   let textNode = div.childNodes[0],
    text = textNode.textContent;
   

2. And here, finally, I've set the array.indexOf() to be equal to the isolated text above and then I've checked with an if statement, if the value of index is greater of -1 then trigger the array.splice() method

   let index = array.indexOf(text);
    if (index > -1) {
      array.splice(index, 1);
    };