Select DataTable中一行的按钮

Question

I have a dataTable where I bring the data from the database with Jquery in each row I have two buttons where I accept or reject something, I want to know how can I do when I reject something the button of accepr disappears and if I accept that the same thing happens with the other button of reject

public function mostrarTabla(){ 

    if (isset($_GET["perfilOculto"])) {

        $item = "idUsuario";
        $valor = $_GET["perfilOculto"];

        $proyectos = ControladorProyectos::ctrMostrarProyectos($item, $valor);

        if(count($proyectos) == 0){

            echo '{"data": []}';

            return;
        }

        $datosJson = '{

            "data": [ ';

            for($i = 0; $i < count($proyectos); $i++){

                $item = "id";
                $valor = $proyectos[$i]["empleadoAsignado"];

                $traerEmpleado = ControladorUsuarios::ctrMostrarEmpleados($item, $valor);

                $empleado = $traerEmpleado[0]["nombreEmpleado"] ." ". $traerEmpleado[0]["apellidoEmpleado"];

                $dato = $proyectos[$i]["idCliente"];

                $clientes = ControladorProyectos::ctrMostrarClientes($dato);

                $cliente = $clientes[0]["nombreEmpresa"];

                $clienteContacto = $clientes[0]["emailContacto"];

                if($proyectos[$i]["aceptado"] == 0){

                    $colorEstado = "btn-info";
                    $textoEstado = "Aceptado";
                    $estadoAceptado = 1;

                    $colorEstado2 = "btn-danger";
                    $textoEstado2 = "Cancelado";
                    $estadoAceptado2 = 2;

                    $colorEstado3 = "btn-info";
                    $textoEstado3 = "Pendiente de aceptar";
                    $estadoTarea = 1;

                    $estado = "<button class='btn btn-xs aceptado btnAcptado ".$colorEstado." idProyecto='". $proyectos[$i]["id"]."' estadoAceptado='".$estadoAceptado."' estadoBoton='".($i+1)."'>".$textoEstado."</button>&nbsp";

                    $estado2 = "<button class='btn btn-xs rechazado btnRechazado ".$colorEstado2."' idProyecto='". $proyectos[$i]["id"]."' estadoAceptado2='".$estadoAceptado2."'>".$textoEstado2."</button>";

                    $estado3 = "<button class='btn btn-xs btnEstado ".$colorEstado3."' idProyecto='". $proyectos[$i]["id"]."' estadoTarea='".$estadoTarea."'>".$textoEstado3."</button>";

                    $botones =  "<div class='btn-group'><button class='btn btn-warning btnEditarProyecto' idProyecto='".$proyectos[$i]["id"]."' data-toggle='modal' data-target='#modalEditarProyecto'><i class='fa fa-pencil'></i></button><button class='btn btn-danger btnEliminarProyecto' idProyecto='".$proyectos[$i]["id"]."'><i class='fa fa-times'></i></button></div>"; 


                } else if($proyectos[$i]["aceptado"] == 1){

                    $colorEstado = "btn-info";
                    $textoEstado = "Aceptado";
                    $estadoAceptado = 1;

                    $colorEstado2 = "invisible";
                    $textoEstado2 = "Cancelado";
                    $estadoAceptado2 = 2;

                    $colorEstado3 = "btn-info";
                    $textoEstado3 = "En proceso";
                    $estadoProyecto2 = 1;

                    $estado2 = "<button class='".$colorEstado2."'></button>";

                    $estado = "<button class='btn btn-xs aceptado btnAcptado ".$colorEstado."' idProyecto='". $proyectos[$i]["id"]."' estadoAceptado='".$estadoAceptado."'>".$textoEstado."</button>&nbsp";

                    $estado3 = "<button class='btn btn-xs btnEstado ".$colorEstado3."' idProyecto='". $proyectos[$i]["id"]."' estadoProyecto2='".$estadoProyecto2."'>".$textoEstado3."</button>";

                    $botones =  "<div class='btn-group'><button class='btn btn-warning btnEditarProyecto' idProyecto='".$proyectos[$i]["id"]."' data-toggle='modal' data-target='#modalEditarProyecto'><i class='fa fa-pencil'></i></button><button class='btn btn-danger btnEliminarProyecto' idProyecto='".$proyectos[$i]["id"]."'><i class='fa fa-times'></i></button></div>"; 

                } else {
                    $colorEstado = "invisible";
                    $textoEstado = "Aceptado";
                    $estadoAceptado = 1;

                    $colorEstado2 = "btn-warning";
                    $textoEstado2 = "Cancelado";
                    $estadoAceptado2 = 2;

                    $colorEstado3 = "btn-info";
                    $textoEstado3 = "Proyecto cancelado";
                    $estadoProyecto2 = 3;

                    $estado = "<button class='".$colorEstado."'></button>";

                    $estado2 = "<button class='btn btn-xsr echazado btnCancelar ".$colorEstado2."' idProyecto='". $proyectos[$i]["id"]."' estadoAceptado2='".$estadoAceptado2."'>".$textoEstado2."</button>";

                    $estado3 = "<button class='btn btn-xs btnEstado ".$colorEstado3."' idProyecto='". $proyectos[$i]["id"]."' estadoProyecto2='".$estadoProyecto2."'>".$textoEstado3."</button>";

                    $botones =  "<div class='btn-group'><button class='btn btn-warning btnEditarProyecto' idProyecto='".$proyectos[$i]["id"]."' data-toggle='modal' data-target='#modalEditarProyecto'><i class='fa fa-pencil'></i></button><button class='btn btn-danger btnEliminarProyecto' idProyecto='".$proyectos[$i]["id"]."'><i class='fa fa-times'></i></button></div>"; 
                }

                $algo = "<div class='btn-group'>";

                $finAlgo = "</div>";



                $datosJson .= '[
                    "'.$cliente.'",
                    "'.$proyectos[$i]["nombreProyecto"].'",
                    "'.$clienteContacto.'",
                    "'.$algo.$estado.$finAlgo.$algo.$estado2.$finAlgo.'",
                    "'.$estado3 .'",
                    "'.$empleado.'",
                    "'.$botones.'"
                ],';
            }

            $datosJson = substr($datosJson, 0, -1);

            $datosJson.=  ']

        }'; 

        echo $datosJson;
    }
}

In JavaScript the click event I've like this

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

  var idProyecto = $(this).attr("idProyecto");
  var estadoAceptado2 = $(this).attr("estadoAceptado2");
  var estadoProyecto2 = 1;

  console.log(estadoAceptado2);

  var datos = new FormData();
    datos.append("idProyecto", idProyecto);
    datos.append("activarProyecto", estadoAceptado2);
    datos.append("estadoProyecto2", estadoProyecto2);

    $.ajax({

    url:"ajax/proyectos.ajax.php",
    method: "POST",
    data: datos,
    cache: false,
      contentType: false,
      processData: false,
      success: function(respuesta){
        console.log(respuesta);

        if(window.matchMedia("(max-width:767px)").matches){

           swal({
            title: "El usuario ha sido actualizado",
            type: "success",
            confirmButtonText: "¡Cerrar!"
          }).then(function(result) {

              if (result.value) {

              window.location = "proyectos";

            }

          });


    }
      }

    })

    if(estadoAceptado2 == 2){

      $(this).addClass('btn-danger');
      $(this).removeClass('btn-info');
      $(this).html('Cancelado');

      $("tr").find('nombreTexto').hide();

    }

})

Answer 1

Are both buttons children of <div class='btn-group'> ? If yes, you can do something like this on you button click event :

$(document).on('click', '.btnRechazado', function(){
    $(this).closest('div.btn-group').find('.btnEliminarProyecto').remove();
    //your code
});

Or, if both buttons are siblings elements :

$(this).siblings('button').remove();

If you do not want to remove <button> element from the DOM you can change remove() to hide()

JQuery remove() and hide() API Documentation: https://api.jquery.com/remove/ , https://api.jquery.com/hide/