How do i delete a specific element from an array

Question

If i select an image it will add to array and if i deselect this image after selecting another photos, it won't delete from array, but i want only those selected items that are inserted to an array

const selectItem = (event, img) => {
  let element = event.target;
  element.classList.toggle('added');
  const index = sliders.indexOf(img);
  if (index === -1) {
    sliders.push(img);
  } else {
    sliders.splice(img, 1);
  }
}

score 1 · Accepted Answer · answered Feb 14 '21 at 10:37

1

When you want to remove an element from an array using splice, you need to define it as:

sliders.splice(index, 1)

where index is the index of the image to be removed from the array and as you want to remove a single element so we have passed one.

answered Feb 14 '21 at 10:37

Yash Maheshwari

1,352
2
5
16

Thanks a lot! code is working! – Rony Barua Feb 14 '21 at 10:51

score 0 · Answer 2 · answered Feb 14 '21 at 10:51

Using splice(index, 1); you can remove the unselected image from the array

var imageSelectedArray = [];
function handleClick(cb) {
  //Check if image alreay exit in an array or not
  var index = imageSelectedArray.indexOf(cb.value);
  
  if(index == -1){
    //Insert image URL in array
    imageSelectedArray.push(cb.value);
  }
  else{
    //Remove image if already exist.
    imageSelectedArray.splice(index, 1);
  }
  
  console.log(imageSelectedArray);
}

ul {
  list-style-type: none;
}

li {
  display: inline-block;
}

input[type="checkbox"][id^="cb"] {
  display: none;
}

label {
  border: 1px solid #fff;
  padding: 10px;
  display: block;
  position: relative;
  margin: 10px;
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

label::before {
  background-color: white;
  color: white;
  content: " ";
  display: block;
  border-radius: 50%;
  border: 1px solid grey;
  position: absolute;
  top: -5px;
  left: -5px;
  width: 25px;
  height: 25px;
  text-align: center;
  line-height: 28px;
  transition-duration: 0.4s;
  transform: scale(0);
}

label img {
  height: 100px;
  width: 100px;
  transition-duration: 0.2s;
  transform-origin: 50% 50%;
}

:checked+label {
  border-color: #ddd;
}

:checked+label::before {
  content: "✓";
  background-color: grey;
  transform: scale(1);
}

:checked+label img {
  transform: scale(0.9);
  box-shadow: 0 0 5px #333;
  z-index: -1;
}

<ul>
  <li><input type="checkbox" id="cb1" onclick='handleClick(this)' value="https://picsum.photos/seed/1/100" />
    <label for="cb1"><img src="https://picsum.photos/seed/1/100" /></label>
  </li>
  <li><input type="checkbox" id="cb2" onclick='handleClick(this)' value="https://picsum.photos/seed/2/100" />
    <label for="cb2"><img src="https://picsum.photos/seed/2/100" /></label>
  </li>
  <li><input type="checkbox" id="cb3" onclick='handleClick(this)' value="https://picsum.photos/seed/3/100" />
    <label for="cb3"><img src="https://picsum.photos/seed/3/100" /></label>
  </li>
  <li><input type="checkbox" id="cb4" onclick='handleClick(this)' value="https://picsum.photos/seed/4/100" />
    <label for="cb4"><img src="https://picsum.photos/seed/4/100" /></label>
  </li>
</ul>

How do i delete a specific element from an array

2 Answers2