fijate que ya elimino el php ```lang-html <body> <?php include 'navbar.php' ?> <div class="container bg-white mt-3"> <div class="content row vh-10 justify-content-center align-items-center"> <h1 class="text-center">Crear Nueva Sucursal</h1> <div class="col-auto"> <form autocomplete="false"> <label class="d-flex justify-content-center align-items-center" for="Nombre">Sucursal: <input class="form-control" type="text" name="Sucursal" id="sucursal" placeholder="Escribe la nueva Sucursal" required> <input class="btn btn-dark btn-md mb-3 mt-3 " style="margin-left: 15px;" type="button" value="Agregar Sucursal" id="Agregar_sucursal"> </label> </form> </div> </div> </div> <div class="container bg-white mt-3"> <h2 class="text-center">Sucursales Existentes</h2> <div class="content"> <table style="margin:auto; width:55%; margin-bottom: 5vw;" class="table table-hover table-bordered bg-light text-black"> <thead> <th style="font-size: 23px;">Nombre</th> <th style="margin:auto; width:12%; font-size: 23px;">Acciones</th> </thead> <tbody></tbody> </table> </div> </div> <script> const pag = 'crud.php'; //ruta pagina php crud o consulta //al terminar de cargar document.addEventListener('DOMContentLoaded', function() { PintaTabla(); //dibujo la tabla }); // al hacer click en el boton Agregar_sucursal Agregar_sucursal.addEventListener('click', (e) => { e.preventDefault(); //detengo el envio del form FetchAsynAwait(pag, { 'sucursal': sucursal.value }, 'text').then((ret) => { //envio por fetch sucursal.value = ''; if (ret == 'ok') { PintaTabla(); //si todo sale bien actualizo la tabla } else { alert(ret); //algo salio mal } }) }); // fincion para eliminar una sucursal const borra = (e) => { FetchAsynAwait(pag, { 'borra': e }, 'text').then((ret) => { console.log(ret); }); } // funcion que me dibuja la tabla const PintaTabla = () => { FetchAsynAwait(pag, { 'consulta': true }).then((ret) => { let tbody = ''; for (let i = 0; i < ret.length; i++) { tbody += ` <tr style="background:white;"> <td style="font-size: 20px;">${ret[i].NOMBRE_SUCURSAL}</td> <td class="d-flex justify-content-center"> <span onclick="borra(${ret[i].ID_SUCURSAL});" role="button" class="btn btn-danger"><i class="fas fa-trash-alt"></i></a></td> <tr> `; } document.querySelector('tbody').innerHTML = tbody; }); } // funcion async fetch const FetchAsynAwait = async (pag, dataJson, r = 'json') => { const opciones = { method: 'POST', cache: 'no-cache', body: JSON.stringify(dataJson), headers: { 'Content-Type': 'application/json' } }; try { const fetchResp = await fetch(pag, opciones); const retorna = await r === 'json' ? fetchResp.json() : fetchResp.text(); return retorna; } catch (e) { return e; } } </script> ``` Para el archivo que ejecuta el php, yo le llame **crud.php** tu puedes cambiarlo pero recuerda comentarlo en el JavaScript en la **const pag** ```lang-php <?php include 'model/conexion.php'; $json = json_decode(file_get_contents('php://input'), true); if (!empty($json['sucursal'])) { $nombre = $json['sucursal']; $consulta = $con->prepare("INSERT INTO sucursal(NOMBRE_SUCURSAL) VALUES(?);"); $result = $consulta->execute([$nombre]); if ($result == true) { echo "ok"; } else { echo "no se pudo agregar el contacto"; } } if (!empty($json['consulta'])) { $consulta = $con->query("SELECT * FROM sucursal;"); echo json_encode($consulta->fetchAll(PDO::FETCH_OBJ),true); } if (!empty($json['borra'])) { echo $json['borra']; // este es el ID_SUCURSAL // Aca tu consulta de borrar } ``` Te escribí el JavaScript comentado para que logres entender como funciona, espero haberte ayudado.