Delete stock directly from Jquery button

Question

How do I make sure that when I click the remove button and activate the removeCampo() function, it is called the page that would delete this directly from the mysql database? I only need the part of Jquery for this, because PHP and Mysql I know how to do. See below:

I’m bringing this information from the database as follows:

....
while($jmTamanhos = mysqli_fetch_object($sql)){
      $visualizar .=  "<tr class='linhas'>
         <td  style=\"padding: 5px\"><input type=\"text\" name=\"Cores[]\" class=\"tamanhos form-control\" placeholder=\"Cor do Produto\" value='".$jmTamanhos->Cores."'></td>
         <td  style=\"padding: 5px\"><input type=\"text\" name=\"Tamanho[]\" class=\"form-control pull-left\" placeholder=\"Tamanho\" value='".$jmTamanhos->Tamanho."'></td>
         <td  style=\"padding: 5px\"><input type=\"number\" name=\"EstoqueProd[]\" class=\"form-control pull-left\" placeholder=\"Estoque\" min=\"1\" value='".$jmTamanhos->Estoque."'></td>
         <td  style=\"padding: 5px\">
         <input type='hidden' name='IDEstoques[]' value='".$jmTamanhos->IDEstoques."'>
         <button type=\"button\" class=\"removerCampo btn btn-danger\" title=\"Remover linha\"><i class=\"fa fa-minus-square\" aria-hidden=\"true\"></i> Remover</button>
         </td>
       </tr>";
}
$visualizar .= " <tr><td colspan=\"3\"><button type=\"button\" class=\"adicionarCampo btn btn-primary\" title=\"Adicionar item\"><i class=\"fa fa-plus-square\" aria-hidden=\"true\"></i> Adicionar mais tamanhos</button></td></tr>";
....

And the Jquery:

<script type="text/javascript">
$(function () {
    removeCampo();
  function removeCampo() {
    $(".removerCampo").unbind("click");
    $(".removerCampo").bind("click", function () {
       if($("tr.linhas").length > 1){
        $(this).parent().parent().remove();
       }
    });
  }
  $(".adicionarCampo").click(function () {
    novoCampo = $("tr.linhas:first").clone();
        novoCampo.find('input[type="text"]').val("");
      novoCampo.find('select').val("");
      novoCampo.insertAfter("tr.linhas:last");
      removeCampo();
  });
});
</script>

Answer 1

For this you will need to make a requisition http to an archive php that contains the query that will exluir. Who really excluir is the php, the ajax will be responsible only for sending the request (and a id to exclude the correct).

An example of how this would work is:

<button data-id="1" class="excluir">Excluir</button>

Like your button is added with the while you can pass the id in the data-id.

$(document).on('click', '.excluir', function(){
    $.ajax({
       type: 'POST',
       url: 'seuArquivo.Php',
       data: {id: $(this).attr('data-id')},
       success: function(data){
          alert('excluido')
          removeCampo()
       }
    })
})

The ajax will pass your id way POST for the php file, then the php would look something like this.

$sql = $pdo->prepare("DELETE FROM tabela WHERE id = ?");
$sql->execute(array($_POST['id']))

With this you could already delete a record from the database by pressing the button excluir. There are several ways to do this, I just gave an example.