如何从数组中删除特定元素

Question

如果我 select 一张图片，它将添加到数组中，如果我在 select 之后删除 select 这张图片另一张照片，它不会从数组中删除，但我只想要插入到的那些 selected 项目数组

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

Answer 1

当你想使用拼接从数组中删除一个元素时，你需要将其定义为：

sliders.splice(index, 1)

其中 index 是要从数组中删除的图像的索引，因为您想删除单个元素，所以我们传递了一个。

Answer 2

使用splice(index, 1);您可以从数组中删除未选择的图像

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

javascript

arrays

array-splice