Как задать команду удаления всего блока #elements при нажатии на картинку .delete

$(function(){
    let a = 1;
    
    $("#add")
        
        .click(function(){
            $("#none").detach()
            $("#spisok").append($("<div>", {"id": "elements" + a }))
            $("#elements" + a).css({
                "width": "470px",
                "min-height": "136px",
                "background-color": "white",
                "margin-bottom": "20px"
            })
            $("#elements" + a).append($("<div>", {"id": "headelements" + a}))
            $("#headelements" + a).css({
                "height": "50px",
            })
            $("#headelements" + a).append($("<div>", {"text": $("#datacase").val(), "id": "nameelements" + a}))
            $("#nameelements" + a).css({
                "padding": "14px 5px 5px 20px",
                "float": "left"
            })
            $("#headelements" + a).append($("<img>", {"src" : "delete.png", "class": "delete i" + a}))
            $(".delete i" + a).css({
                "margin": "20px 0 0 20px",
            })
            $("#elements" + a).append($("<hr>"))
            $("hr").css({
                "margin": "0",
                "border-color": "#f7f7f7"
            })
            $("#elements" + a).append($("<div>", {"id" : "textelements" + a, "text" : $("#datadescription").val()}))
            $("#textelements" + a).css({
                "padding": "10px 5px 5px 20px",
                "color": "gray",
                "word-wrap": "break-word"
            })
            a += 1;
        });
});