Non-Submit form after dynamically deleting a div with javascript

Question

I’m setting up an online ordering system where the items will be added dynamically as needed by the user with a javascript function, until then everything is working, the problem is when I need to remove one of the added Ivs, after removal, the non-Submit form in any way, I even tried to force the Submit co javascript, but the fields of the remaining items are not passed by post.

Follows code:

<script type="text/javascript" src="assets/js/jquery-3.4.0.min.js"></script>
<script type="text/javascript">

var idContador = 0;

function exclui(id){
    var campo = $("#"+id.id);
    campo.hide(200);
}


$( document ).ready(function() {

    $("#btnAdicionaTelefone").click(function(e){
        e.preventDefault();
        var tipoCampo1 = "text";
        var tipoCampo2 = "number";
        var tipoCampo3 = "text";
        var tipoCampo4 = "text";
        adicionaCampo(tipoCampo1, tipoCampo2, tipoCampo3, tipoCampo4);
    })

    function adicionaCampo(tipo1, tipo2, tipo3, tipo4){

        idContador++;

        var idCampo1 = "campoExtra1"+idContador;
        var idCampo2 = "campoExtra2"+idContador;
        var idCampo3 = "campoExtra3"+idContador;
        var idCampo4 = "campoExtra4"+idContador;
        var idForm = "formExtra"+idContador;

        var where = "where tbproduto.status = 'A' order by tbproduto.descricao ";
        var html = "";

        html += "<div  class='form-group' id='"+idForm+"'>";

        html += "<div class='col-sm-4'> ";
        html += "   <select class='form-control' required id='"+idCampo1+"' name='produto[]' >";
        html += "       <option id='content_combo' value='' selected='selected'> Selecione um Produto </option>";
        html += "       <?php $result = $pdo->query('SELECT * from tbproduto "+where+" '); while ($row = $result->fetch(PDO::FETCH_OBJ)){ ?>";
        html += "       <option id='content_combo' value='<?php echo $row->guid; ?>'> <?php echo $row->descricao; ?> </option>";
        html += "       <?php } ?> ";
        html += "   </select>";
        html += "</div>";

        html += "<div class='col-sm-2'><input type='"+tipo2+"' id='"+idCampo2+"' onChange='alterar_div("+idContador+")' class='form-control novoCampo' name='qtdunitaria[]' placeholder='Quantidade'/></div>";
        html += "<div class='col-sm-2'><input type='"+tipo3+"' id='"+idCampo3+"' onChange='alterar_div("+idContador+");dindin("+idContador+");' class='form-control novoCampo' name='vlrunitario[]' step='0.01' min='0' placeholder='Valor Unitário'/></div>";
        html += "<div class='col-sm-3'><input type='"+tipo4+"' id='"+idCampo4+"' oninput='alterar_div("+idContador+")' class='form-control novoCampo' name='vlrtotalitem[]' readonly placeholder='Valor Total'/></div>";

        html += "<span class='input-group-btn'>";
        html += "<div class'col-lg-1'><button class='btn btn-danger' onclick='exclui("+idForm+");' type='button'><span class='fa fa-trash'></span></button></div>";
        html += "</span>";

        html += "</div>";

        $("#imendaHTML").append(html);
    }

    $(".btnExcluir").click(function(){
        console.log("clicou");
        $(this).slideUp(200);
    })

});

</script>

<!-- FILE UPLOAD STYLES -->
<link rel="stylesheet" href="assets/css/bootstrap-fileupload.min.css" />

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

<form class="form-horizontal style-form" name="myForm" id="myForm" action="func_edit_pedcompra.php?acao=editar&guid=<?php echo $guid; ?>" method="post" enctype="multipart/form-data">

                    <div class="form-group col-lg-6">
                        <label class="col-sm-12 col-sm-12 control-label">Favorecido</label>   
                        <div class="col-lg-12 ">                      
                            <select class="form-control" required name="pessoa" >
                                <option id="content_combo" value="<?php echo $codpessoa; ?>" selected="selected"> --> <?php echo $nomepessoa; ?> </option>
                                <?php
                                //Selecciona as opiniões  
                                $grFab = $pdo->query("SELECT * FROM tbpessoa Where tbpessoa.status = 'A' and tbpessoa.guid != '$codpessoa' ORDER BY nome");
                                while ($row = $grFab->fetch(PDO::FETCH_OBJ)){
                                ?>
                                <option value="<?php echo $row->guid; ?>"> <?php echo $row->nome; ?> </option>
                                <?php } ?>
                            </select>
                        </div>
                    </div>

                    <div class="form-group col-lg-3">
                        <label class="col-sm-12 col-sm-12 control-label">Valor de Desconto</label>
                        <div class="col-sm-12">
                            <input type="text" class="form-control" name="vlrdesconto" id="vlrdesconto" onKeyPress="return(moeda(this,'.',',',event))" step="0.01" min="0" placeholder="R$ Desconto" value="<?php echo formataFloatMoeda($vlrdesconto); ?>">
                        </div>
                    </div>

                    <div class="form-group col-lg-3">
                        <label class="col-sm-12 col-sm-12 control-label">Valor de Acréscimo </label>
                        <div class="col-sm-12">
                            <input type="text" class="form-control" name="vlracrescimo" id="vlracrescimo" onKeyPress="return(moeda(this,'.',',',event))" step="0.01" min="0" placeholder="R$ Acréscimo" value="<?php echo formataFloatMoeda($vlracrescimo); ?>">
                        </div>
                    </div>

                    <div class="form-group col-lg-12">
                        <label class="col-sm-12 col-sm-12 control-label">Observações do Produto</label>
                        <div class="col-sm-12">    
                            <textarea class="form-control" type="text" name="obs" id="obs" rows="3%" cols="3%" placeholder="Observações"><?php echo $obs; ?></textarea>   
                        </div>
                    </div>

                    <label class="col-sm-12"> Produtos do Pedido <div class="pull-right"><button type="button" class="btn btn-default" <a href="#" id="btnAdicionaTelefone" ><i class="fa fa-plus"></i> Adicionar Produto </a></button></div></label>
                    <div class="well col-lg-12">

                        <div class="col-lg-12">

                            <?php
                                $result = $pdo->query("SELECT tbpeditem.numitemped, tbpeditem.guid as guid, tbpeditem.vlrunitario as vlrunitario, tbpeditem.qtdunitaria as qtdunitaria, SUM((vlrunitario * qtdunitaria)) AS vlrtotalitem, tbproduto.descricao as descprod, tbproduto.guid as codprod, tbfichaprod.guid as fichaprod
                                from tbpeditem 
                                inner join tbproduto on tbproduto.guid = tbpeditem.produto
                                inner join tbfichaprod on tbfichaprod.tbpaiitem = tbpeditem.guid
                                where pedcompra = '$guid' 
                                group by tbpeditem.guid, tbproduto.descricao, tbproduto.guid, tbfichaprod.guid"); 
                                $i=0; while ($row = $result->fetch(PDO::FETCH_OBJ)){ 

                                $idCampo1 = "campoSalvo1".$i;
                                $idCampo2 = "campoSalvo2".$i;
                                $idCampo3 = "campoSalvo3".$i;
                                $idCampo4 = "campoSalvo4".$i;
                                $idForm = "formSalvo".$i;
                            ?>
                            <div  class='form-group' id='<?php echo $idForm; ?>'>

                                <!-- Campo oculto para envio de guid do item do pedido -->
                                <input type="hidden" name="guidpeditem[]" id="guidpeditem" value="<?php echo $row->guid; ?>" />
                                <input type="hidden" name="guidfichaprod[]" id="guidfichaprod" value="<?php echo $row->fichaprod; ?>" />

                                <div class='col-sm-4'>
                                    <select class='form-control' required id='<?php echo $idCampo1; ?>' name='produto[]' >
                                        <option id='content_combo' value="<?php echo $row->codprod; ?>" selected='selected'> <?php echo $row->descprod; ?> </option>
                                        <?php 
                                            $result2 = $pdo->query("SELECT * from tbproduto where tbproduto.status = 'A' and tbproduto.guid != '$row->codprod' "); 
                                            while ($row2 = $result2->fetch(PDO::FETCH_OBJ)){ 
                                        ?>
                                        <option id='content_combo' value='<?php echo $row2->guid; ?>'> <?php echo $row2->descricao; ?> </option>
                                        <?php 
                                            } 
                                        ?> 
                                    </select>
                                </div>

                                <div class='col-sm-2'>
                                    <input type='number' id='<?php echo $idCampo2; ?>' onChange='alterar_div2(<?php echo $i; ?>)' class='form-control novoCampo' name='qtdunitaria[]' placeholder='Quantidade' value="<?php echo $row->qtdunitaria; ?>" />
                                </div>

                                <div class='col-sm-2'>
                                    <input type='text' id='<?php echo $idCampo3; ?>' onChange='alterar_div2(<?php echo $i; ?>);' onKeyPress="return(moeda(this,'.',',',event))" class='form-control novoCampo' name='vlrunitario[]' step='0.01' min='0' placeholder='Valor Unitário' value="<?php echo formataFloatMoeda($row->vlrunitario); ?>" />
                                </div>

                                <div class='col-sm-3'>
                                    <input type='text' id='<?php echo $idCampo4; ?>' oninput='alterar_div2(<?php echo $i; ?>)' class='form-control novoCampo' name='vlrtotalitem[]' readonly placeholder='Valor Total' value="<?php echo formataFloatMoeda($row->vlrtotalitem); ?>" />
                                </div>

                                <span class='input-group-btn'>
                                    <div class="col-lg-1">
                                        <button class='btn btn-danger' onclick='removeSalvo("<?php echo $idForm; ?>");' type='button'><span class='fa fa-trash'></span></button>
                                    </div>
                                </span>

                            </div>

                            <?php
                                $i++;
                                }
                            ?>

                            <div id="imendaHTML" class="text-center"></div>
                        </div>

                    </div>

                <div class="col-lg-12"> 

                    <div class="form-group col-lg-6" align="right">
                        <button type="submit" id="cadastrar" value="Cadastrar" class="btn btn-default" onclick="document.getElementById('').submit()">Alterar</button>
                        <button type="reset" class="btn btn-warning">Resetar</button> 
                </form>
                    </div>

                    <div class="form-group col-lg-6" align="left">
                        <form class="form-horizontal style-form" action="admpedcompra.php" method="post" enctype="multipart/form-data">
                            <a href="admpedcompra.php"><input type="submit" value="Cancelar" class="btn btn-primary"/></a>
                        </form>
                    </div> 

                </div>

Answer 1

The error is because you are hiding an element with the attribute required, and with that he stays unfocusable (no ability to receive focus). When trying to submit the form, the browser will try to focus on this hidden element resulting in error, and consequently aborting the submission.

The problem lies in that line:

campo.hide(200);

The .hide() hides the element of the page, but it is still in the DOM, and the browser will get it in the Submit, even if it is hidden, because it has required.

You were the one remove the DOM element with:

campo.remove();