How to run a hide with ajax

1

The difficulty in question is how to recover the Id or the class of TH / TD being that the code is in a variable within a FOR I will try to explain with some images.

After a search in the database, and I can list all the people in my family. https://i.stack.imgur.com/khCZN.png ">

function buscarMembro(data){
    var recebe_prontuario_familiar = data;
    // console.log(recebe_prontuario_familiar);
    $.ajax({
        url : baseUrl+"/default/cadastro-familiar/buscar-membros/id/"+data,
        type : "GET",
        data : recebe_prontuario_familiar,
        success : function(r){
        // console.log(r);
        var resultado = [];
        var grauParentesco = [];
        var guardaId = [];
            for(var i = 0 ; i < r.length ; i++){
            guardaId [i+1] = r[i].usu_membro;
            switch (r[i].tgp_grau_parentesco) {
                    case 1:
                            grauParentesco[i+1] = 'MÃE'
                        break;

                    case 2:
                        grauParentesco[i+1] = 'PAI'
                    break;

                    case 3:
                        grauParentesco[i+1] = 'IRMÃO'
                    break;

                    case 4:
                        grauParentesco[i+1] = 'IRMÃ'
                    break;

                    case 5:
                        grauParentesco[i+1] = 'FILHO'
                    break;

                    case 6:
                        grauParentesco[i+1] = 'FILHA'
                    break;

                    case 7:
                        grauParentesco[i+1] = 'AVÔ'
                    break;

                    case 8:
                        grauParentesco[i+1] = 'AVÓ'
                    break;

                    case 999:
                        grauParentesco[i+1] = 'OUTROS'
                    break;

                    default:

                        break;
                }    
            resultado[i] = "<table>"+
                    "<tr id='"+i+"'>"+   
                        "<th class='nome"+i+"' name='nome"+i+"' id='nomeId"+i+"'>Nome : </th>"+
                        "<th class='grau"+i+"' name='grau"+i+"' id='nomeId"+i+"' style='position: absolute;margin: -0.1% 25%;'>Grau Parentesco : </th>"+
                    "</tr>"+

                    "<tr>"+
                        "<td class='apresentaNome"+i+"' name='apresentaNome"+i+"' id='"+i+"' style ='position: absolute;margin: -2.3% 6%;'>"+r[i].usu_nome+"</td>"+    

                        "<td class='apresentaGrau"+i+"' name ='apresentaGrau"+i+"' id='"+i+"' style ='position: absolute;margin: -2.3% 45%;'>"+grauParentesco[i+1]+"</td>"+ 

                        "<a href='#'  name='botaoExcluir"+i+"' id='botaoExcluir"+i+"' class='ui-button Editar ui-corner-bl ui-corner-tr' onclick='excluirMembroFamiliar("+guardaId [i+1]+")' data-atalho='CTRL+N' style ='position: absolute;margin: -0.7% 54%;'>Excluir</a>"+
                        "<a href='#'  name='botaoEditar"+i+"' id='botaoEditar"+i+"' class='ui-button Editar ui-corner-bl ui-corner-tr' data-atalho='CTRL+N' style ='position: absolute;margin: -0.7% 63%;'>Editar</a>"+

                "</table>";
        }
            // console.log(resultado);
            for (var i = 0; i < resultado.length ; i++) {
                $("#familiares").append(resultado[i]);
            }
        }
    })
}

So I started to develop the part of deleting the family member, which worked, has already been checked in the database, through the function,

function excluirMembroFamiliar(data){
    var recebeId = data;
    var recebeClasseTH = $(".nome").val();
    console.log(recebeClasseTH);
    $.ajax({
        url : baseUrl+"/default/cadastro-familiar/buscar-membro/id/"+data,
        type : "GET",
        data : recebeId,

        success: function(success){
            alert("Membro excluido com sucesso !");   
        }

    })
    return false;
}

Now what I want to do is delete the corresponding line, but I can not imagine how to recover the data from TD or TH, I was told to use data-rel even though I can not get it to work.

HTML:

<a href="/WebSocialSaude/zf/cadastro-familiar/cadastrar" class="ui-button novo ui-corner-bl ui-corner-tr" data-atalho="CTRL+N">Novo</a>
<table class='grid ui-widget ui-widget-content ui-corner-all' width='100%' style="margin-top:04px;">
    <tr class="ui-widget-header">
        <th>Prontuario Familiar</th>
        <th>Nome do Responsavel</th>
        <!-- <th>Data de Nascimento</th> -->
        <th>Codigo Responsavel</th>
        <th>Renda Familiar</th>
        <th>Residente Desde</th>
        <th>Número de Membros</th>
        <th>Adicionar Membro</th>
    </tr>
    <?php foreach ($this->cadastroFamiliar as $familia) { ?>
    <tr>
        <td class="ui-state-default c" width="50" name="numeroProntuario" id="numeroProntuario"> <?=$familia->tcf_prontuario_familiar?></td>
        <td class="ui-state-default c" width="50" name="nomeResponsavel" id="nomeResponsavel"> <?=$familia->usu_nome_responsavel?> </td>
        <!-- <td class="ui-state-default c" width="50" name="dataNascimento" id="dataNascimento"> <?=$familia->usu_data_nascimento?> </td> -->
        <td class="ui-state-default c" width="50" name="usuarioResponsavel" id="usuarioResponsavel"> <?=$familia->usu_responsavel?> </td>
        <td class="ui-state-default c" width="50" name="rendaFamiliar" id="rendaFamiliar"> <?=$familia->tcf_renda_familiar?> </td>
        <td class="ui-state-default c" width="50" name="residenteDesde" id="residenteDesde"> <?=$familia->tcf_residente_desde?> </td>
        <td class="ui-state-default c" width="50" name="numeroMembros" id="numeroMembros"> <?=$familia->tcf_numero_membros?> </td>

        <td class="ui-state-default c" width="50">
            <a class="ui-button novo ui-corner-bl ui-corner-tr" onclick="inserirIntegrantes(<?=$familia->tcf_prontuario_familiar?>)" >Adicionar</a>
        </td>

    <? } ?>
</table>

        <div id="inserir_membro" style="display: none">
            <form action="" method="POST" name="formMembro" id="formMembro" style="background-color: #ecf5fb;">
                <fieldset>
                    <div id="familiares">

                    </div>
                    <legend>Lista familiar</legend>

                    <label>Adicionar novo membro:</label>
                    <input type="text" name="usu_nome" id="usu_nome" value="" class="focus" onkeypress="buscaPacienteFamilia()" />
                    <input type="hidden" name="usu_codigo" id="usu_codigo" value="" />
                    <input type="hidden" name="id_nome" id="id_nome" value="usu_nome"/>
                    <input type="hidden" name="id_codigo" id="id_codigo" value="usu_codigo" />
                    <!-- <input type="hidden" name="id_data" id="id_data" value="" /> -->
                    <input type="hidden" name="id_button" id="id_button" value="" />
                    <input type="hidden" name="id_tipo" id="id_tipo" value="A" />

                    <input type="hidden" name="tcf_prontuario_familiar" id="tcf_prontuario_familiar" value="">
                    <!-- console.log(this.value) -->
                    <p style="display: inline-block;">Grau parentesco : </p>
                    <select class="form-control ui-state-default" name="tb_grau_parentesco" value="" id="tb_grau_parentesco" onchange="$('#tb_grau_parentesco').val(this.value)">
                        <?php foreach ($this->tbGrauFamiliar as $parentesco) { ?>

                            <option value="<?=$parentesco->tgp_codigo?>">
                                <?=$parentesco->tgp_descricao?>
                            </option>
                        <? } ?>
                    </select>
                    <a href="#" onclick="salvarMembro()" class="ui-button novo ui-corner-bl ui-corner-tr">Adicionar Membro</a>

                    <!-- <button type="button"  class="ui-button novo ui-corner-bl ui-corner-tr" onclick="salvarMembro()">Adiconar Membro</button> -->

                </fieldset>
            </form>
        </div>
    </tr>
    
asked by anonymous 14.11.2018 / 20:43

1 answer

0

You just run the remove() function inside the success of your AJAX , filtering by tr .

Since the function is running on the button, and the button is within tr , just do this:

function excluirMembroFamiliar(data, element){
    var recebeId = data;
    var recebeClasseTH = $(".nome").val();
    console.log(recebeClasseTH);
    $.ajax({
        url : baseUrl+"/default/cadastro-familiar/buscar-membro/id/"+data,
        type : "GET",
        data : recebeId,

        success: function(success){
            alert("Membro excluido com sucesso !");
            $(element).parents('tr').remove();
        }

    })
    return false;
}

On your delete button:

<a href='#'  name='botaoExcluir"+i+"' id='botaoExcluir"+i+"' class='ui-button Editar ui-corner-bl ui-corner-tr' onclick='excluirMembroFamiliar("+guardaId [i+1]+", this)' data-atalho='CTRL+N' style ='position: absolute;margin: -0.7% 54%;'>Excluir</a>

An example:

function excluir(element) {
    $(element).parents('tr').remove()    
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><table><thead><tr><th>Nome</th><th>Ação</th></tr></thead><tbody><tr><td>Jorge</td><td><ahref="#" onclick="excluir(this)"> Excluir </a>                  </td>        
        </tr>    
         <tr>
            <td>Maria </td>
            <td> 
              <a href="#" onclick="excluir(this)"> Excluir </a>                  </td>
        </tr> 
         <tr>
            <td>Jose </td>
            <td>  
              <a href="#" onclick="excluir(this)"> Excluir </a> 
             </td>
          </tr> 
    </tbody>
</table>
    
14.11.2018 / 21:21