如何从数组中删除元素

How to remove element from array

本文关键字：删除 元素 数组      更新时间：2023-09-26

我的代码没有什么问题。我在一个空数组中按下输入的值，然后用remove按钮在html列表中显示该值。

但是，当我删除html中的值时，数组仍然保留该值。我使用了arr.splice(0, 1)，但它没有删除特定的值。示例：

我的html列表看起来像：

  • v1
  • v2
  • v3

列表填充后的我的数组：

array = [v1, v2, v3]

当我在html中删除v2时，我的数组不会改变。我是JavaScript的新手。

我在JSBin或JSFiddle中的代码。

对不起，我的英语不是很好

https://jsfiddle.net/15mdjdpa/

var taches = [];
var saisie;
var ecran;
var liste;
var organiz;
var j= 0;
function run(){
  saisie= document.getElementById('champ').value;
  taches.push(saisie);
  
  ecran = document.getElementById('afficheur');
  var liste = document.getElementById('listes');
  
  console.log("taches :", taches);
  var li = document.createElement('li');
  li.setAttribute("id", "lisupr");
  var btn = document.createElement('Button');
  btn.textContent="X";
  btn.addEventListener("click",function supr (){ 
    liste.removeChild(li);
    
        taches.splice(0,1);
        console.log("tableau taches: "+ taches);
      
    
    
  } );
  
  li.innerText= saisie + " "+" ";
  console.log("saisie "+saisie);
  li.appendChild(btn);
  liste.appendChild(li);
}
<input type ="text" id="champ" onfocus="javascript:this.value=''" class="form-control ">
  <button type="button" onclick ="run()" class="btn btn-primary"  >send</button>
  <div id="afficheur"><h4> list : </h4>
    <ul id="listes"> </ul>
  </div>

如果要从array中删除v2，请执行以下操作。

var index = array.indexOf(v2);
if(index != -1) array.splice(index,1);

我会用jQuery重写这段代码。我会删除所有的id——你可以相对于被点击的按钮进行编辑。这会让你在一页上有不止一个这样的东西。

HTML:

<div class="module">
  <input class="item" />
  <button type="button" class="btn btn-primary js-add">add</button>
  <ul class="list"></ul>
</div>

这是脚本：

var list = [],
  addToList = function(target,item){
    list.push(item);
    target
      .append(
        $('<li>')
          .html(item)
          .append(
            $('<button>')
              .addClass('js-delete m-l')
              .html('X')
          )
      )
  }
$('.js-add').click( function(){
  var parent = $(this).parent(),
    item = parent.find('input.item');
  addToList(parent.find('ul.list'),item.val());
  item.val('');
})
$('.module').on( 'click', '.js-delete', function(){
  var parent = $(this).parent(),
    index = $('li').index( parent );
  list.splice(index,1);
  parent.remove();
  console.log(list);
})

事实上，如果你想添加多个列表，你实际上需要将"list"数组嵌套在一个对象或数组中，并引用它，可能在模块div中。

你的问题是Angular在没有所有管理的情况下自动做什么。它将html内容绑定到json数组，因此您所需要做的就是更改或删除数组值。html会立即反映更改。

这是一个jsfiddle：

https://jsfiddle.net/mckinleymedia/yducyt83/

相关文章：