アレイのすべてのインスタンスではなく、アレイの現在のインスタンスだけを削除するにはどうすればよいですか？

Question

アレイのすべてのインスタンスではなく、現在のインスタンスのみを削除するにはどうすればよいですか？

var persons = []; 

showAllButton.onclick = function() { 

    while (showList.firstChild)showList.removeChild(showList.firstChild); 

新しいノードインスタンスが作成されました。

プッシュされたインスタンスを正しく表示します。

listNode.innerHTML = 
    '<p><b>Full Name:</b> ' + persons[l].firstName +' ' + persons[l].lastName + '</p>' + 
    '<p><b>Phone:</b> ' + persons[l].phone + '</p>' + 
    '<p><b>Address:</b> ' + persons[l].address + '</p>' 
    } 

次の関数のいくつかのバリエーションを試してみましたが、配列を空にするか、少なくとも修正された配列を返しません。

btn.onclick = function() { 
     var index = Array.indexOf(persons[l]); 
     persons.splice(index, 1);    
     return persons; 
    } 



    if (showAllButton.value=="Show Contacts") { 
     showAllButton.value = "Hide Contacts"; 
     showList.style.display = "block"; 
    } 


    else if (showAllButton.value = "Hide Contacts") { 
     showAllButton.value = "Show Contacts"; 
     showList.style.display = "none"; 
    }  

}

Answer 1

はおそらく、Lをバインドするインデックスlにある要素を削除し、その後、何らかの形でDOMを再描画：予想通り、このような

btn.onclick = function(l) { //take over the bound l 
    persons.splice(l, 1);    
    //some kind of redraw 
    showAllButton.click(); 
}.bind(null,l);//bind l 

Answer 2

何かが動作するはずです（すみません、ブラインドコーディング、今すぐテストする時間がない）

var persons = []; 
function removePerson(index) { 
    persons.splice(index, 1); 
    renderList(); 
} 

function clearList() { 
    while (showList.firstChild) { 
     showList.removeChild(showList.firstChild); 
    } 
} 

function renderItem(person, index) { 
    var item = showList.appendChild(document.createElement("LI")); 

    var label = item.appendChild(document.createElement("SPAN")); 
    label.innerHTML = persons[i]; 

    var btn = item.appendChild(document.createElement("BUTTON")); 
    btn.innerHRML = "Remove"; 
    btn.onclick = removePerson.bind(null, index); 
} 

function renderList() { 
    clearList(); 
    persons.forEach(renderItem); 
} 

ベストプラクティスではありませんが、動作しているようです。

Answer 3

最終的な作業コード、ありがとうございます！