How to delete a certain item of an array?-CodePudding

There are 5 items in a array (which consists objects inside) and it is represented visually by creating some elements in the document as per the array length. Like this:

let array = [
  {
    "value": "Hello"
  },
  {
    "value": "World"
  },
  {
    "value": "You Can"
  },
  {
    "value": " NOT"
  },
  {
    "value": "<h1>Remove ME!</h1>"
  }
]

// creating it visually by creating elements.
for(let i = 0; i < array.length; i  ) {
  const div = document.createElement("div");
  div.classList.add("DIV");
  div.innerHTML = `
    <span class="Text">${array[i].value}</span>
    <span class="Remove">( Remove )</span>
  `
  document.body.appendChild(div);
}

document.querySelectorAll(".Remove").forEach(elem => {
  elem.addEventListener("click", () => {
    remove();
  }) 
})

function remove() {
  // Now how to remove the specific item from the array?
  
}

// I hope this is fully understandable.

/* CSS IS NOT VERY IMPORTANT */

.DIV {
  padding: 10px;
  margin: 10px;
  background: purple;
  color: #fff;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
}
.Remove {
  cursor: pointer;
  height: fit-content;
}

Now I want to remove the 4th element of the array that has the value of "NOT" by clicking the 4th remove button but how can I do that.
( Your code should work in all the elements. ) Any help will be highly appreciated. Thank You.

CodePudding user response：

In simple terms, add an id or some kind of identifier and use it that way.

let array = [
  {
    "value": "Hello"
  },
  {
    "value": "World"
  },
  {
    "value": "You Can"
  },
  {
    "value": " NOT"
  },
  {
    "value": "<h1>Remove ME!</h1>"
  }
]

// creating it visually by creating elements.
for (let i = 0; i < array.length; i  ) {
  const div = document.createElement("div");
  div.classList.add("DIV");
  div.innerHTML = `
    <span class="Text">${array[i].value}</span>
    <span class="Remove" data-id="${"elem-"   i}">( Remove )</span>
  `;
  document.body.appendChild(div);
}

document.querySelectorAll(".Remove").forEach(elem => {
  elem.addEventListener("click", () => {
    remove(elem.dataset.id);
  })
})

function remove(id) {
  // Now how to remove the specific item from the array?
  console.log(id);
}

// I hope this is fully understandable.

/* CSS IS NOT VERY IMPORTANT */

.DIV {
  padding: 10px;
  margin: 10px;
  background: purple;
  color: #fff;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
}

.Remove {
  cursor: pointer;
  height: fit-content;
}

The above code will get the dataset now. Using this, remove the element of that id and rerender the view.

let array = [
  {
    "value": "Hello"
  },
  {
    "value": "World"
  },
  {
    "value": "You Can"
  },
  {
    "value": " NOT"
  },
  {
    "value": "<h1>Remove ME!</h1>"
  }
]

function renderElement(array) {
  // creating it visually by creating elements.
  for (let i = 0; i < array.length; i  ) {
    const div = document.createElement("div");
    div.classList.add("DIV");
    div.innerHTML = `
      <span class="Text">${array[i].value}</span>
      <span class="Remove" data-id="${"elem-"   i}">( Remove )</span>
    `;
    document.body.appendChild(div);
  }
  document.querySelectorAll(".Remove").forEach(elem => {
    elem.addEventListener("click", () => {
      remove(elem.dataset.id);
    })
  });
}

renderElement(array);

function remove(id) {
  // Now how to remove the specific item from the array?
  // Remove the `elem-` from id.
  array.splice( id.replace("elem-", ""), 1);
  document.querySelectorAll("body > .DIV").forEach(elem => {
    elem.remove();
  });
  renderElement(array);
}

// I hope this is fully understandable.

/* CSS IS NOT VERY IMPORTANT */

.DIV {
  padding: 10px;
  margin: 10px;
  background: purple;
  color: #fff;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
}

.Remove {
  cursor: pointer;
  height: fit-content;
}