Javascript – How to dynamically delete todo note in my basic todo application using delete button? Now I need to refresh page to delete it

I’m working on a web application using Javascript to make and delete a todo list, and I have implemented a note deletion and insertion functionality. However, currently, I need to refresh the page for the note to disappear from the UI after clicking the delete button. I want to make it happen dynamically without a page refresh.

Here’s the code for my delete button:

function deleteTodo(id) {
  console.log(id);
  fetch("http://localhost:3000/todos/" + id, {
    method: 'DELETE',
    headers: {
      "Content-Type": "application/json"
    }
  }).then(() => {
    console.log('done delete');
    var todoElement = document.getElementById(id);
    var parentElement = document.getElementById('mainArea');
    parentElement.removeChild(todoElement);

  });
}

function todosCallback(data) {

  var parentElement = document.getElementById('mainArea');

  for (var i = 0; i < data.length; i++) {
    var childElement = document.createElement('div');

    var grandChildElement1 = document.createElement('span');
    grandChildElement1.innerHTML = data[i].title;

    var grandChildElement2 = document.createElement('span');
    grandChildElement2.innerHTML = data[i].description;

    var grandChildElement3 = document.createElement('button');
    grandChildElement3.innerHTML = "Delete";
    grandChildElement3.setAttribute("onclick", "deleteTodo(" + data[i].id + ")")

    childElement.appendChild(grandChildElement1);
    childElement.appendChild(grandChildElement2);
    childElement.appendChild(grandChildElement3);
    parentElement.appendChild(childElement);


  }

}

function getDataCallback(resp) {
  resp.json().then(todosCallback);
}

function getData() {
  fetch('http://localhost:3000/todos', {
    method: "GET",
  }).then(getDataCallback)
}

getData();

function parsedResponse(data) {
  console.log(data);
  var parentElement = document.getElementById('mainArea');
  var childElement = document.createElement('div');

  var grandChildElement1 = document.createElement('span');
  grandChildElement1.innerHTML = data.title;

  var grandChildElement2 = document.createElement('span');
  grandChildElement2.innerHTML = data.description;

  var grandChildElement3 = document.createElement('button');
  grandChildElement3.innerHTML = "Delete";

  childElement.appendChild(grandChildElement1);
  childElement.appendChild(grandChildElement2);
  childElement.appendChild(grandChildElement3);
  parentElement.appendChild(childElement);


}

function callback(resp) {
  resp.json().then(parsedResponse);
}
var onPress = () => {
  var title = document.getElementById('title1').value;
  var description = document.getElementById('description').value;

  fetch("http://localhost:3000/todos", {
    method: 'POST',
    body: JSON.stringify({
      title: title,
      description: description
    }),
    headers: {
      "Content-Type": "application/json"
    }
  }).then(callback)
}

I tried adding .removeChild to deleteTodo.then() but didnt worked for me.

Edit:

    console.log(id);
    fetch("http://localhost:3000/todos/" + id, {
        method: 'DELETE',
        headers: {
            "Content-Type": "application/json"
        }
    }).then(() => {
        console.log('done delete');
        var todoElement = document.getElementById(id);
        todoElement.parentElement.remove();
    });

this also isnt working neither .remove()