动态元素事件绑定JS

Question

我正在尝试制作简单的Todo应用程序，但是我不知道如何为动态创建的Todos提供事件监听器。

在输入框中，可以通过按Enter键添加Todo，但我不知道如何为新创建的框提供事件监听器。

我也尝试使用此答案中的方法，但问题仍然存在。 Stackoverflow Answer

我想做什么（在JS中）：

我希望最初将购物篮图标显示设置为无，当我将鼠标悬停在新的Todo上时，将运行一个事件并显示购物篮，当我单击“ Basket”时，它将完全删除该Todo。

SimpleTodo

<div class="wrapper">
  <div class="content">
    <div class="bar">
      <h2>TASKY</h2>
      <i class="fas fa-plus"></i>
    </div>

    <div class="add-todos">
      <input type="text" name="add-todo" value="" placeholder="Click Enter to add...">
    </div>
    <div class="todos-box">
      <div class="todo">
        <i class="far fa-trash-alt istyle"></i>
        <h2 class="h2style">Sale Oranges</h2>
      </div>
    </div>
  </div>
</div>