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.