Как удалить определенные c динамически сгенерированные элементы с помощью jQuery без удаления всех других динамически сгенерированных элементов

Question

$("#add-note").on("click",function(e){
        e.preventDefault();
        const noteTitle = $("#note-title").val().trim();
        const note = $("#note-input").val().trim();
        const currentTime = new Date().toLocaleTimeString();
        const currentDate = new Date().toLocaleDateString();
        $("#notes").append("<div class='note'>"+ 
        "<p class='note-head'>"+ noteTitle +"</p>" + 
        "<div class='content'>" + note + "</div>" +
        "<p class='current-time'>"+ currentDate + " " + currentTime +"</p>"+ 
        "</div>" + "<form>"+ 
        "<button type='button' class='btn add'>Add</button>"+
        "<button type='button' class='btn delete'>Delete</button>"
        +"</form>");
    });
   $(document).on('click', '.delete', function(){ 
        $(this).parent().parent().children().remove();
   });

Я хочу иметь возможность удалить только содержимое указанной заметки, но когда нажимается кнопка удаления и на странице есть более одной заметки, каждая заметка удаляется.

Answer 1

form не является дочерним элементом div, поэтому .parent().parent() удаляет #notes. Используйте .prev() и сопоставьте div:

$(document).on('click', '.delete', function() {
    $(this).parent().prev("div.note").remove();
});

Это поднимает уровень, чтобы нацелить div.content, затем ищет предыдущий div.note, затем удаляет его.