单击按钮从数组中删除对象

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

有两个问题：

如果你只是把数组的长度作为id你会得到重复的条目，如果你删除一个条目。也许去一个时间戳 - 我只是使用了你已经在那里的那个，但增加了秒数
您检索 value-attribute 但对于拼接，您需要元素的索引。我只是将时间戳作为属性添加到按钮并将其用于删除。

可能不是我最好的代码，但我希望它能给你正确的提示。

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)

或者您可以将 filter 与您存储在 tweets 中的任何数据一起使用。我看不出这部分有任何用处：

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

单击按钮从数组中删除对象

Deleting an object from an array on click of a button

javascript

html

arrays

splice