Блог

Я удаляю строки формы в соответствии с базой данных с помощью асинхронного запроса. Проблема в том, что всякий раз, когда я удаляю строки, если я внес какие-либо изменения в форму, я теряю все изменения, потому что я делаю запрос обратно в базу данных.

Поэтому я намерен удалить строки без необходимости делать запрос к базе данных.

Код:

 success:function(data1){
var linha1 = ``;
for (var i = 0; i < data1.length; i  ) { 
Id = data1[i][0];
DataRegisto = data1[i][1];
Cliente = data1[i][2];
Orcamento = data1[i][3];
Ref = data1[i][4];
Designacao = data1[i][5];
Quantidade = data1[i][6];
Valor = data1[i][7];
Compra = data1[i][8];
  
  linha1  = `<input type="checkbox" name="eliprod[]" class="rest" value="${ Id }">
  <input type="hidden" class="form-control1" name="Id[]" value="${Id}">
<div class="form-group col-md-2">  
  <input type="text" class="form-control1" name="Refe[]" value="${Ref}">
  <span class="form-highlight"></span>
  <span class="form-bar"></span>
  <label class="label1" for="Refe">Refª</label>        
  </div>
<div class="form-group col-md-10">  
  <input type="text" class="form-control1" name="Designaca[]" value="${Designacao}">
  <span class="form-highlight"></span>
  <span class="form-bar"></span>
  <label class="label1" for="Designaca">Designação</label>        
</div>`;
}
linha1  = `<button type="button" class="btn btn-danger caixa btn-show close-sidebar delete_prod"><i class="fa fa-trash fa-5x taman" aria-hidden="true"></i></button>`;
$("#retorc1").html(linha1);
}
  

JS:

 $(document).on("click", ".delete_prod", function(){
 var eliprod = [];
   $("input[name='eliprod[]']").each(function() {eliprod.push(this.checked)});
   var Id = [];
   $("input[name='Id[]']").each(function() {Id.push(this.value)});
    var dadosajax = {
      'eliprod[]' : eliprod,
      'Id[]' : Id
    };
        
        if(confirm('Tem certeza de que deseja remover o produto do orçamento?'))
        {
            $.ajax({
               url: 'delorc.php',
               type: 'GET',
               cache: false,
               data: dadosajax,
               error: function() {
                  alert('Algo está errado!');
               },
               success: function(data) {
                   var orc = $("input[name='orc']").val();

                   $.getJSON('updorc2.php?orc'  'amp;orc='   orc, function (data1) {
                       
                     var linha2 = ``;
                        for (var i = 0; i < data1.length; i  ) { 

                            Id = data1[i][0];
                            DataRegisto = data1[i][1];
                            Cliente = data1[i][2];
                            Orcamento = data1[i][3];
                            Ref = data1[i][4];
                            Designacao = data1[i][5];
                            Quantidade = data1[i][6];
                            Valor = data1[i][7];
                            Compra = data1[i][8];

                            linha2  = `<input type="checkbox" name="eliprod[]" class="rest" value="${ Id }">
                              <input type="hidden" class="form-control1" name="Id[]" value="${Id}">
                              <div class="form-group col-md-2">  
                                    <input type="text" class="form-control1" name="Refe[]" value="${Ref}">
                                    <span class="form-highlight"></span>
                                    <span class="form-bar"></span>
                                    <label class="label1" for="Refe">Refª</label>        
                                  </div>
                                  <div class="form-group col-md-6">  
                                    <input type="text" class="form-control1" name="Designaca[]" value="${Designacao}">
                                    <span class="form-highlight"></span>
                                    <span class="form-bar"></span>
                                    <label class="label1" for="Designaca">Designação</label>        
                                  </div>`;
                            }
                            linha2  = `<button class="btn btn-danger caixa btn-show close-sidebar delete_prod"><i class="fa fa-trash fa-5x taman" aria-hidden="true"></i></button>
                            $("#retorc1").html(linha2); 
                            }); 
                
                    alert("Produto removido com sucesso");
                    
               }
            });
        }

    }); 
  

Итак, это работает, но у него есть проблема с обновлением формы. Я хотел удалить входные данные формы в соответствии с базой данных без обновления формы

Во-первых, вы захотите обернуть каждую строку данных в элемент div, это будет родительский элемент. Давайте вызовем этот div, <div class='item-row'> .

Это подтвердит удаление, которое вы хотите удалить. Затем он захватывает этот родительский элемент.

Поскольку мы удаляем только выбранный идентификатор, нам нужно только захватить и передать этот идентификатор. Затем в случае успеха мы просто удаляем _parent элемент из DOM.

При этом форма не изменяется, за исключением строки, которую вы удалили.

 $(document).on("click", ".delete_prod", function() {
      if (confirm('Tem certeza de que deseja remover o produto do orçamento?')) {
      _parent = $(this).parents(".item-row");
    var dadosajax = {
      "Id[]" : _parent.find("input[name='Id[]']").val(),
    };

        $.ajax({
            url: 'delorc.php',
            type: 'GET',
            cache: false,
            data: dadosajax,
            error: function() {
              alert('Algo está errado!');
            },
            success: function(data) {
               _parent.remove();
            })          
        });
       }
});
  

Я решил свою проблему следующим образом:

Сначала я создал родительский div следующим образом с входными данными, которые я хочу исключить:

 <div id="produto-${ Id }">

...

</div>
  

Затем я подобрал идентификаторы выбранных флажков следующим образом:

 var checados = [];
  $.each($("input[name='eliprod[]']:checked"), function(){            
    checados.push($(this).val());
  });
  

В случае успеха я сделал цикл для удаления строк в форме, даже если я выбираю более одного флажка, подобного этому:

  for (var i = 0; i < checados.length; i  ) { 
     Id = checados;
     $('#produto-'   Id[i]).remove();
 }
  

Полный код:

  $(document).on("click", ".delete_prod", function(){

 var checados = [];
  $.each($("input[name='eliprod[]']:checked"), function(){            
      checados.push($(this).val());
  });

    var dadosajax = {
     'checados[]' : checados
    };

    if(confirm('Tem certeza de que deseja remover o produto do orçamento?'))
    {
        $.ajax({
           url: 'delorc.php',
           type: 'GET',
           cache: false,
           data: dadosajax,
           error: function() {
              alert('Algo está errado!');
           },
           success: function(data) {

             for (var i = 0; i < checados.length; i  ) { 
                Id = checados;
    
                $('#produto-'   Id[i]).remove();
             }
                alert("Produto removido com sucesso");
                
           }
        });
    }

  });