單擊按鈕從數組中刪除對象

Question

我正在嘗試創建自己的小型 Twitter。

一切正常，但我找不到通過單擊按鈕刪除特定推文的方法。 我試過 splice() 但它總是刪除數組的第一個對象。

這是我的代碼：

 var tweets = [] function postNewTweet() { var today = new Date(); var date = today.getDate() + '-' + (today.getMonth() + 1) + '-' + today.getFullYear(); var time = today.getHours() + ':' + today.getMinutes(); var id = tweets.length + 1; var li = document.createElement('li'); var inputValue = document.getElementById('newTweet').value; var finalValue = id + ' ' + inputValue + ' ' + date + ' ' + time; var t = document.createTextNode(finalValue); li.appendChild(t); tweets.push({ id: id, content: inputValue, date: date + ' ' + time }); document.getElementById('list').appendChild(li); document.getElementById('newTweet').value = ""; console.log(tweets); var buttonDelete = document.createElement("button"); buttonDelete.innerHTML = '<i class="far fa-trash-alt"></i>'; buttonDelete.onclick = deleteItem; function deleteItem(e) { var ul = document.getElementById('list'); ul.removeChild(li); var list = document.getElementById('list'); list.addEventListener('click', function(e) { var index = e.target.getAttribute('value'); tweets.splice(index, 1); console.log(tweets) }); } li.appendChild(buttonDelete); }

 <div id='post'> <textarea maxlength="160" id='newTweet'></textarea> <button id='postIt' onclick="postNewTweet()">Post</button> </div> <ul id='list'> </ul>

所以它會在 HTML 中刪除它，但不會正確地在數組中刪除它。

Answer 1

有兩個問題：

1. 如果您只是將數組的長度作為 id，那么如果您刪除一個條目，您將獲得重復的條目。 也許去一個時間戳 - 我只是使用了你已經在那里但增加了幾秒鍾的時間戳
2. 您檢索 value-attribute 但對於 splice 您需要元素的索引。 我只是將時間戳作為屬性添加到按鈕並將其用於刪除。

可能不是我最好的代碼，但我希望它能給你正確的提示。

 var tweets = [] function postNewTweet() { var today = new Date(); var date = today.getDate() + '-' + (today.getMonth() + 1) + '-' + today.getFullYear(); var time = today.getHours() + ':' + today.getMinutes() + ':' + today.getSeconds(); var id = tweets.length + 1; var li = document.createElement('li'); var inputValue = document.getElementById('newTweet').value; var finalValue = id + ' ' + inputValue + ' ' + date + ' ' + time; var t = document.createTextNode(finalValue); li.appendChild(t); tweets.push({ id: id, content: inputValue, date: date + ' ' + time }); document.getElementById('list').appendChild(li); document.getElementById('newTweet').value = ""; console.log(tweets); var buttonDelete = document.createElement("button"); buttonDelete.innerHTML = '<i class="far fa-trash-alt" del-date="'+date + ' ' + time +'">del</i>'; buttonDelete.onclick = deleteItem; function deleteItem(e) { var ul = document.getElementById('list'); ul.removeChild(li); var list = document.getElementById('list'); list.addEventListener('click', function(e) { var delDate = e.target.getAttribute('del-date'); let index = tweets.map((item) => item.date).indexOf(delDate); console.log(index); tweets.splice(index, 1); console.log(tweets) }); } li.appendChild(buttonDelete); }

 <div id='post'> <textarea maxlength="160" id='newTweet'></textarea> <button id='postIt' onclick="postNewTweet()">Post</button> </div> <ul id='list'> </ul>

Answer 2

由於您可以在刪除功能中訪問li ，因此您也可以訪問所有其他數據。 您可以使用它們找出要從tweets數組中刪除的元素。 例如，在您當前的代碼中，您可以使用id ：

    tweets.splice(id - 1, 1)

或者，您可以對存儲在tweets任何數據使用filter 。我看不出這部分有任何用處：

var list = document.getElementById('list');
    list.addEventListener('click', function(e) {
      var index = e.target.getAttribute('value');
      tweets.splice(index, 1);
      console.log(tweets)
    });

您可以刪除ul.removeChild下的推文

Answer 3

deleteItem函數主體的第二部分似乎沒用。 雖然有幾種方法可以解決它，但我建議如下：

function deleteItem(e) {
    var ul = document.getElementById('list');
    ul.removeChild(li);

    var foundIndex = tweets.findIndex(function (tweet) {
        return tweet.id == id;
    });
    if (foundIndex > -1) {
        tweets.splice(foundIndex, 1);
    }
}