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

Question

I am trying to create my own small Twitter.

It is all working fine but I cannot find a way to delete specific tweet on click of a button. I have tried splice() but it deletes the first object of an array always.

Here is my code:

 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>

So it deletes it in HTML, but not in array correctly.

Answer 1

There are two issues:

1. If you just take the length of the array as the id you will get duplicate entries, if you delete an entry. Perhaps go to a timestamp - i just used the one you already had there but added seconds
2. You retrieve the value-attribute but for splice you need the index of the element. I just added the timestampt as an attribute to the button and used it for removal.

Probably not my best code but I hope it gives you the right hints.

 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

As you have access to li in your delete function, you have access to all the other data too. You can use them to find out the element to remove from the tweets array. For example, in your current code, you can use the id :

    tweets.splice(id - 1, 1)

Or you can use filter with any of the data that you store in tweets .And I don't see any use for this part:

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

You can just remove the tweet under the ul.removeChild

Answer 3

The second part of your deleteItem function's body seems useless. While there are couple of ways to resolve it, I suggest the following:

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