Question

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

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

我的HTML列表如下：

v1
v2
V3

列表填满后我的数组：

array = [v1, v2, v3]

当我删除html中的v2时，我的数组没有变化。我是JavaScript的新手。

我的代码位于JSBin或JSFiddle。

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

https://jsfiddle.net/15mdjdpa/

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

如果您要从v2删除array，请执行此操作。

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

Answer 2

我使用jQuery重写了这段代码。我将删除所有ID - 您可以相对于单击的按钮进行编辑。除了其他方面，这将允许您在页面上拥有多个这样的内容。

HTML：

OK

这是脚本：

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

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

您的问题是Angular自动执行的操作 - 没有所有管理。它将html内容绑定到json数组，因此您需要做的就是更改数组值，或删除它。 HTML会立即反映出这种变化。

这是一个jsfiddle：

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

如何从数组中删除元素

2 个答案: