Can't delete div from to-do list
<p>I'm creating a to-do list app, and in the app there is a div that wraps an input box (for the to-do item and so the user can edit the to-do) and a icon from font-awesome. When the user clicks on the icon, I want the <strong>entire div</strong> (which contains the to-do and the delete icon) to be deleted. But when tried to do that, it didn't work. Can someone help me?</p>

<p>Here's the JS Code</p>

<pre><code>$(document).ready(() =&gt; {
    $(".input input").on("keypress", check_todo);
    $(".fa-trash").on("click", ".todo_container", delete_todo);
})

// delete todo
let delete_todo = (e) =&gt; {
    e.target.remove();
}

// add todo
let add_todo = () =&gt; {
    let todo = $(".input input").val();

    $(".output").append(`
        &lt;input type="text" placeholder="Edit To-do" value="${todo}"&gt;&lt;i class="fa fa-trash fa-lg" aria-hidden="true"&gt;&lt;/i&gt;
        `);
    $(".input input").val("");
}

// check todo
let check_todo = (e) =&gt; {
    if (e.keyCode == 13) {
        if ($(".input input").val() == "") {
            no_todo();
        } else {
            add_todo();
        }
    }
}

// no todo
let no_todo = () =&gt; {
    alert("Please add a new todo");
}
</code></pre>

<p><a href="http://codepen.io/thejseffect/pen/gLyBLQ" rel="nofollow noreferrer">See the html and a demo</a></p>