[Dúvida] Alteração das Tarefas | JavaScript: explorando a manipulação de elementos e da localStorage

Minha duvida está mais na alteração de tarefas, pois no momento que adiciono elas no Applications fica aparecendo dois, o anterior e o novo. Não sei se é para ficar assim ou é um erro.O código para a análise:

const btnAdicionarTarefa = document.querySelector('.app__button--add-task')
const formAdicionarTarefa = document.querySelector('.app__form-add-task')
const textarea =document.querySelector('.app__form-textarea')
const ulTarefas = document.querySelector('.app__section-task-list')

const tarefas = JSON.parse(localStorage.getItem('tarefas'))

function atualizartarefas (){
   localStorage.setItem('tarefas', JSON.stringify(tarefas))
}

function criarElementoTarefa(tarefa) {
   const li = document.createElement('li')
   li.classList.add('app__section-task-list-item')

   const svg = document.createElement('svg')
   svg.innerHTML = `
        <svg class="app__section-task-icon-status" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <circle cx="12" cy="12" r="12" fill="#FFF"></circle>
            <path d="M9 16.1719L19.5938 5.57812L21 6.98438L9 18.9844L3.42188 13.4062L4.82812 12L9 16.1719Z" fill="#01080E"></path>
        </svg>
   `

   const paragrafo = document.createElement('p')
   paragrafo.textContent = tarefa.descricao 
   paragrafo.classList.add('app__section-task-list-item-description')

   const botao = document.createElement('button')
   botao.classList.add('app_button-edit')

   botao.onclick = () => {
      const novaDescricao = prompt("Qual é o novo nome da tarefa?")
      paragrafo.textContent = novaDescricao
      tarefa.descricao = novaDescricao
      atualizartarefas()
   }

   const imagemBotao = document.createElement('img')

   imagemBotao.setAttribute('src','/imagens/edit.png')

   botao.append(imagemBotao)

   li.append(svg)
   li.append(paragrafo)
   li.append(botao)

   return li
}

btnAdicionarTarefa.addEventListener('click', () => {formAdicionarTarefa.classList.toggle('hidden')})

formAdicionarTarefa.addEventListener('submit', (evento) => {
   evento.preventDefault();
   const tarefa = {
    descricao: textarea.value
   }
   tarefas.push(tarefa)
   const elementoTarefa = criarElementoTarefa(tarefa)
   ulTarefas.append(elementoTarefa)
   atualizartarefas()
   textarea.value = ''
   formAdicionarTarefa.classList.add('hidden')
})

tarefas.forEach(tarefa => {
   const elementoTarefa = criarElementoTarefa(tarefa)
   ulTarefas.append(elementoTarefa)
});

Olá, Vitor. Tudo bem?

Analisando o seu código e o contexto fornecido, parece que o problema está na maneira como você está manipulando o localStorage. Quando você adiciona uma nova tarefa, você está empurrando essa nova tarefa para o array tarefas, e então atualizando o localStorage. No entanto, parece que você está esquecendo de limpar o localStorage antes de adicionar a nova tarefa.

O localStorage não é automaticamente limpo quando você usa localStorage.setItem(), então o que está acontecendo é que a nova tarefa está sendo adicionada ao localStorage existente, resultando em duas tarefas sendo exibidas.

Uma possível solução para o seu problema seria limpar o localStorage antes de adicionar a nova tarefa. Você pode fazer isso usando localStorage.clear() antes de localStorage.setItem(). Aqui está um exemplo de como você poderia fazer isso:

function atualizartarefas (){
   localStorage.clear();
   localStorage.setItem('tarefas', JSON.stringify(tarefas))
}

Porém, tenha cuidado ao usar localStorage.clear(), pois ele irá limpar todo o localStorage, não apenas os dados que você está manipulando neste código. Se você tiver outros dados no localStorage que não deseja apagar, você precisará encontrar uma maneira diferente de limpar apenas os dados que deseja.

Espero ter ajudado e bons estudos!