Стереть страницу из запроса jjery ajax к другому

Question

У меня есть ajax post запрос на отправку формы, где я манипулирую страницей на основе значений, возвращаемых из контроллера, но моя проблема в том, что всякий раз, когда форма отправляется, мне нужно стереть значения из последнего запроса.Например, я отправляю форму, и когда это происходит, я добавляю некоторый текст на страницу, если форма отправляется во второй раз, мне нужно стереть эти значения в последний раз и добавить на страницу новое содержимое.

Здесьэто код:

 function ajaxPost(){

        // DO POST
        $.ajax({
            type : "POST",
            url : "/search",
            dataType: "json",
            data : {
                  'marcaId': $('#marcaId').val(),
                  'modelId': $('#modelId').val(),
                  'pretDeLa': $('#pretDeLa').val(),
                  'pretPanaLa': $('#pretPanaLa').val(),
                  'anFabrDeLa' : $('#anFabrDeLa').val(),
                  'anFabrPanaLa' : $('#anFabrPanaLa').val(),
                  'orasParam' : $('#orasParam').val()
            },
            success : function(data) {
                console.log(data);

                for(var i=0; i<data.length; i++){
                    $('.row.autovitElements').append("<div class='col-sm-3 elementAutovit'>" + "<div class='card' style='width:20rem;'>" +
                            "<img class='card-img-top' src=" + JSON.stringify(data[i].img) + "alt='Card image cap'>" +
                            "<div class='card-body text-center'>" +
                                "<p class='card-text text-center' style='color: black'>" +data[i].title+ "</p>" +
                                "<ul class='list-group list-group-flush'>" + 
                                    "<li class='list-group-item'>" + 
                                        "<div class='row'>" +
                                            "<div class='col-md-6'>" +
                                                "<i class='material-icons'>&#xe227;</i><span>"+ data[i].price +"</span>" + 
                                            "</div>" +
                                            "<div class='col-md-6'>" + 
                                                "<i class='material-icons'>&#xe0c8;</i><span>"+data[i].city+"</span>" +
                                            "</div>" + 
                                        "</div>" +
                                    "</li>" +
                                "</ul>" +
                                "<button href=''#' class='btn btn-danger'>Save</button>" +
                            "</div>" +
                        "</div> " +
                    "</div> ");

                }

        })

Я пробовал с $('.row.autovitElements').hide();, но он не будет работать: (

Answer 1

for(var i=0; i<data.length; i++){
  $('.row.autovitElements').append("<div class='col-sm-3 elementAutovit'>" + ...

Элементами, которые вы добавляете для результатов ajax, являются elementAutovit, которые являются потомками элемента .row.autovitElements.Таким образом, чтобы «сбросить» результаты, вы удалили бы все добавленные вами элементы, что можно сделать с помощью:

$('.row.autovitElements .elementAutovit').remove()

, который удалит все эти конкретные элементы.ИЛИ, если в контейнере нет ничего, что вы хотите сохранить, вы можете просто очистить его

$('.row.autovitElements').empty()