i can't make a button work, i've tried the eventListener and the onclick [duplicate]

Question

please if someone would be so kind and help me, i would be very happy, clearing i'm a beginner so help if you can, please.

the html

<div>
    <h2>TO-DO LIST</h2>
    <input type="text" id="tasks"  class="List" placeholder="add">
    <input type="submit" id="subButton" onclick="action()">
    <!-- <button type="button" id='resetBut' onclick="deleteIl()">Reset</button>-->
    <div>

   <ul id="myUl" ></ul>

the js

function action() {

  let item = document.createElement('li');
  let inputValue = document.getElementById('tasks').value;
  var t = document.createTextNode(inputValue);
  item.appendChild(t);

  if (inputValue === '') {
    alert("you must write something!");
  } else {
    document.getElementById('myUl').appendChild(item);
  }
  document.getElementById('tasks').value = '';

  const tasksDelete = document.createElement("button");
  tasksDelete.classList.add("delete");
  tasksDelete.innerHTML = 'X';
  item.appendChild(tasksDelete);
  document.getElementsByClassName("delete").onclick = log();
  //document.getElementsByClassName("delete").addEventListener("click", log());

  function log() {
    console.log("name")
  }
  //tasksDelete.document.getElementById('myUl');
  //tasksDelete.removeChild();
}

i'm trying to put a delete button on the elements 'li' (this works), and trying to use the removeChild() but i'm getting 'Uncaught ReferenceError: removeChild is not defined', so to see if it's working i've change the removeChild() for the log function, and now the log function appears in the console when a press the subButton and not when i click on the delete button.