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，则删除条目将得到重复的条目。也许要加上时间戳了-我只是用了一个已经存在的时间戳，但是增加了几秒钟
您检索值属性，但是对于拼接，您需要元素的索引。我只是将时间戳添加为按钮的属性，然后将其用于删除。

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

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

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

3 个答案: