Espero me puedan ayudar en lo siguiente tengo una tabla llamada(tabla_factura) la cual tiene un botón que hace q se muestre otras 5 tablas, mi consulta es como podría hacer que se oculte la tabla_factura al dar click en el boton para mostrar las 5 tablas. Solo que desaparezca la tabla_factura en versión móvil. La propiedad que investigue es el (display: none)
Alguna referencia esta en la parte final del link:https://cybmeta.com/display-none-vs-visibility-hidden-y-tu-como-escondes-las-cosas

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    var valor=0;
    $('#tabla_factura').on('click','.enviar',function(){
        valor = 1;
        var data = tbl_factura.row($(this).parents('tr')).data();//Detecta la fila
        if(tbl_factura.row(this).child.isShown()){//Cuando esta en tamaño responsivo
            var data = tbl_factura.row(this).data();
        }
        Buscar_Cliente(data.ID_CLIENTE);
        Listar_DTProducto(data.ID_DOCUMENTO);
        Buscar_DTProducto(data.ID_DOCUMENTO);
        Listar_CTSAdicional(data.ID_DOCUMENTO);
        Listar_GNCPerdidas(data.ID_DOCUMENTO);
        Buscar_GNCPerdidas(data.ID_DOCUMENTO);
        Buscar_DTVentas(data.ID_DOCUMENTO);
        Listar_TYCondiciones(data.ID_DOCUMENTO);
        Buscar_CTSAdicional(data.ID_DOCUMENTO);
        Listar_CTSUnitario(data.ID_DOCUMENTO);
        document.getElementById('txt_id_compra').value=data.ID_DOCUMENTO;

        if(valor==1){
        }
    })

<!-- language: lang-html -->

    <div class="col-sm-3 table-responsive">
                <table  id="tabla_factura" class="compact row-border" style="width:100%">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Vendedor</th>
                            <th>Documento</th>
                            <th>Acción</th>
                        </tr>
                    </thead>
                </table>

<!-- end snippet -->