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

Если идентификатор элемента #elements меняется динамически, то нужно использовать класс вместо идентификатора. Например:

$(document).on("click", ".delete.i" + a, function(){
    $(this).closest(".elements").remove();
});

И нужно добавить класс 'elements' в создаваемый блок, например:

$("#spisok").append($("<div>", {"id": "elements" + a, "class": "elements" }))

Полностью твой код будет выглятеть так:

$(function(){
    let a = 1;
    
    $("#add").click(function(){
            $("#none").detach()
            $("#spisok").append($("<div>", {"id": "elements" + a, "class": "elements" }))
            $("#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" : "", "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"
            })
            
            $(document).on("click", ".delete.i" + a, function(){
                $(this).closest(".elements").remove();
            });
            a += 1;
    });

Еще возможно, что стоит убедиться, что ваш скрипт Jquery подключен к странице и что вы используете последнюю версию Jquery.

Там, где вы создаете элемент .delete, допишите обработчик клика. Но перед этим сохраните значение a и используйте его в обработчике, например так:

let b = a; // Обновлено

$("#headelements" + a).append($("<img>", {
    "src" : "delete.png", 
    "class": "delete i" + a,
    "click": function() {
        $(this).closest('#elements' + b).remove();
    }
}))

Ответов на подобные вопросы уже множество на ruSO и Вам следовало всего лишь немного поискать. Ранее уже отвечал, как добавить подобные обработчики.
Так как пару ответов Вам уже дали, то вставлю и свои 5 копеек. Для тривиальных задач, как Ваша, можно создать обработчик, который будет фильтровать события на родительском контейнере и обрабатывать их. Преимущество в том, что если элементы добавляются динамически/программно, то такой код/подход тоже будет работать. Вам всего лишь необходимо добавить определённый класс и data-свойства с селекторами:

document.onclick = function(docEvent){
  let elem = docEvent.target;
  let isRemover = elem.classList.contains('elements-remover');
  if(isRemover) {
    // Если необходимо предотвратить/отменить событие по умолчанию,
    // то необходимо вызвать метод preventDefault у события
    // https://developer.mozilla.org/ru/docs/Web/API/Event/preventDefault
    // docEvent.preventDefault();
    // если необходимо также предотвратить дальнейшее "всплытие" события,
    // то необходимо вызвать метод stopPropagation у события
    // https://developer.mozilla.org/ru/docs/Web/API/Event/stopPropagation
    // docEvent.stopPropagation();
    let selector = elem.dataset.removerSelector;
    document.querySelectorAll(selector)
    .forEach(function (domElem) {
      domElem.remove();
    });
  }
};

<p id="must-delete">P#must-delete</p>
<p class="one">P .one</p>
<p class="one">P .one</p>
<p class="two">P .two</p>
<p class="two">P .two</p>
<p>
  <span class="sr">For remove</span>
  <span class="snr">Must not delete</span>
  <span class="sr">For remove</span>
</p>
<p><button class="elements-remover" data-remover-selector="p.one">Remove all P with class .one</button></p>
<p><button class="elements-remover" data-remover-selector="p.two">Remove all P with class .two</button></p>
<p><button class="elements-remover" data-remover-selector="span.sr">Remove all SPAN with class .sr</button></p>
<p><button class="elements-remover" data-remover-selector="#must-delete">Remove elem with id must-delete</button></p>

Применимо к представленому коду...

document.onclick = function(docEvent){
  let elem = docEvent.target;
  let isRemover = elem.classList.contains('elements-remover');
  if(isRemover) {
    let selector = elem.dataset.removerSelector;
    document.querySelectorAll(selector)
    .forEach(function (domElem) {
      domElem.remove();
    });
  }
};

$(function(){
    let a = 1;
    $("#add").click(function(){
      $("#spisok").append($("<div>", {"id": "elements" + a }));
      $("#elements" + a).append($("<div>", {"id": "headelements" + a}));
      $("#headelements" + a).append($("<div>", {"text": "bla-bla-bla " + a, "id": "nameelements" + a}));
      $("#headelements" + a).append($("<img>", {
          "src" : "https://lh3.googleusercontent.com/a/AEdFTp4YCVwpITItdJsn7zLx4PwxbHemX4PYmXG2uRjC=k-s64",
          "class": "delete elements-remover i" + a,
          "title": "Remove bla-bla-bla " + a,
          "data-remover-selector": "#elements" + a
          }));
      a += 1;
    });
});

img {
  width: 64px;
  height: 64px;
  cursor: pointer;
}
div[id^='elements'] {
  border: 1px solid grey;
  margin: 3px;
  padding: 3px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="spisok"></div>
<button id="add">Add</button>