Uncaught SyntaxError: Unexpected token < in JSON at position 0
    at JSON.parse (<anonymous>)
    at XMLHttpRequest.xhr.onload (app.js:138)

No he podido avanzar, necesito borrar un contacto de la base de datos pero me sale el error de arriba. Lo hago tal cual como dice la clase y me sale ese error. 

Alguien me puede ayudar por favor? Muchas gracias.

este es el código de js.


    const formularioContactos = document.querySelector('#contacto'),   //Nueva sintaxis de Javascript. Se coge el id de contacto que esta en editar.php
          listadoContactos = document.querySelector('#listado-contactos tbody');
    
    eventListeners();  //Funcion que se usa para llamar una vez que se ejecute el codigo//
    
    function eventListeners() {
       //cuando el formulario de editar o crear se ejecuta
       formularioContactos.addEventListener('submit', leerFormulario); //cuando alguien de click en añadir o en editar, se ejecutala funcion leer formulario. ES UNA FUNCION
    
       //listener para eliminar boton
       listadoContactos.addEventListener('click', eliminarContacto);
    }
    
    function leerFormulario(e){    //prevenir la accion por default es añadir una e detro del parentesis
        e.preventDefault();
        // console.log('presionaste');  Revisa si sirve el boton
        //Leer los datos de los inputs
        const nombre = document.querySelector('#nombre').value,  //lee los datos del ID que estan en formulario. Para poder que funcione traigo el valor del input que se llama value. Compruebo si los valores tienen algo
              empresa = document.querySelector('#empresa').value,
              telefono = document.querySelector('#telefono').value,
              accion = document.querySelector('#accion').value; //Esta accion viene de la parte de formulario y con el boton añadir.
        //console.log(nombre); compruebo si los valores tienen algo
        if(nombre === '' || empresa === '' || telefono === ''){ 
            //2 parametros texto y clase
            mostrarNotificacion('Todos los campos son obligatorios', 'error');   // Se crea el parametro y va a la parte de la function mostrarNotificacion con una clase 'error'  //Esta notificacion se muestra gracias a lo que se creo abajo NOTIFICACION PANTALLA                               //console.log('Los campos estan vacios'); //forma sencilla de validar para ver si hay algo en el formulario
        } else {
             //pasa la validacion y crear el llamado a AJAX   //console.log('Tienen algo');
             const infoContacto = new FormData();  //Forma para leer los datos de un formulario
             infoContacto.append('nombre', nombre); //se utiliza la funcion append y se pasa la llave 'nombre' y el valor seria la variable de nombre y viene de la parte de arriba.
             infoContacto.append('empresa', empresa);
             infoContacto.append('telefono', telefono);
             infoContacto.append('accion', accion); //me va a decir si es editar o crear
        
            //console.log(...infoContacto); //aparece que esta vacio
    
              if(accion === 'crear'){ //este crear sale del boton de añadir que esta en el hiiden
                //crearemos un nuevo contacto
                insertarBD(infoContacto);  //se crea una funcion que se llama insertarBD y va a tomar el form data
              } else {
                  //editar contacto
              }
      }
    }
    //inserta en la base de datos via AJAX
    function insertarBD(datos) {   //se ejecuta una funcion y toma como parametro unos datos puede ser INFOCONTACTO o solo datos
    //llamado a AJAX
    
    //crear el objeto
    const xhr = new XMLHttpRequest();
    
    //abrir la conexion
    xhr.open('POST', 'inc/modelos/modelo-contactos.php', true);  //primero el tipo de peticion que es: POST.Se utiliza cuando insertas algo a la BD en un formulario y GET es para obtener algo que esta en el servidor
    
    //pasar los datos
    xhr.onload = function() {  //leer la respuesta
      if(this.status === 200) { //quiere decir que la conexion fue exitosa
         console.log(JSON.parse( xhr.responseText) ); //convierte el string a json los () para acceder a los valores individualmente
         //leemos la respuesta de PHP
         const respuesta = JSON.parse( xhr.responseText); //creo una variable con nombre respueta. En este caso se muestra un objeto. 
     
              //inserta un nuevo elemento a la tabla                                                                  //console.log(respuesta.empresa); //el .empresa.nombre.telefono porque lo que viene siendo JSON parse lo convierte a objeto de JS
               const nuevoContacto = document.createElement('tr');
    
               nuevoContacto.innerHTML =`            
                   <td>${respuesta.datos.nombre}</td>
                   <td>${respuesta.datos.empresa}</td>
                   <td>${respuesta.datos.telefono}</td>
               `;       // los template strings son la nueva forma de cocatenar valores         
            
               //crear contenedor botones
               const contenedorAcciones = document.createElement('td');
    
               //crear el icono de editar
               const iconoEditar = document.createElement('i');
               iconoEditar.classList.add('fas', 'fa-pen-square');
    
               //crea el enlace para editar
               const btnEditar = document.createElement('a');
               btnEditar.appendChild(iconoEditar);
               btnEditar.href = `editar.php?id=${respuesta.datos.id_insertado}`;
               btnEditar.classList.add('btn', 'btn-editar');
            
            //agregarlo al padre
            contenedorAcciones.appendChild(btnEditar);
    
            //crear el icono de eliminar
            const iconoEliminar = document.createElement('i');
            iconoEliminar.classList.add('fas', 'fa-trash-alt');
    
            //crear el boton de eliminar
            const btnEliminar = document.createElement('button');
            btnEliminar.appendChild(iconoEliminar);
            btnEliminar.setAttribute('data_id', respuesta.datos.id_insertado);
            btnEliminar.classList.add('btn', 'btn-borrar');
    
            //agregarlo al padre
            contenedorAcciones.appendChild(btnEliminar);
    
            //agregarlo al tr
            nuevoContacto.appendChild(contenedorAcciones);
    
            //agregarlo con los contactos
            listadoContactos.appendChild(nuevoContacto);
    
            //resetear el formulario
            document.querySelector('form').reset();    //quiero que me retorne un formulario y metodo de js para restear el formulario
            //mostrar Notificacion
    
            mostrarNotificacion('Contacto Creado Correctamente', 'correcto'); //Primero toma el mensaje y despues la clase
        } 
    }
    
    //enviar los datos
    xhr.send(datos);  //le paso los datos que quiero enviar. POST agregar nuevos datos a lo que ya existe
    }
    
    *****//eliminar el contacto*****
    function eliminarContacto(e) {
        if(e.target.parentElement.classList.contains('btn-borrar')) {  
                                    
         //tomar el id
         const id = e.target.parentElement.getAttribute('data_id');
         //console.log(id);
         //preguntar al usuario
         const respuesta = confirm('Estas seguro?');
    
         if(respuesta) {
             //llamado a AJAX
             //crear el obejto
            const xhr = new XMLHttpRequest();
    
             //abrir la conexion
            xhr.open('GET', `inc/modelos/modelo-contactos.php?id=${id}&accion=borrar`, true);
    
             //leer la respuesta
             xhr.onload = function() {
                 if(this.status === 200) {
                     **const resultado = JSON.parse(xhr.responseText);**
    
                console.log(resultado);
                 }
             }
             //enviar la peticion
             xhr.send(); //cuando se envia por POST se agrega la variable
         }
       }
    }
    
    //Notificacion en pantalla
    function mostrarNotificacion(mensaje, clase) { //Todos los campos son obligatorios pasa a ser un mensaje con la clase   //crear la funcion y se le pone mostrarNotificacion
        const notificacion = document.createElement('div'); //se crea una variable con nombre notificacion 
        notificacion.classList.add(clase, 'notificacion', 'sombra'); //creo una nueva clase llamado notificacion, le doy un nombre y genero un div, una clase y un contenido. Esto ayuda para que desaparezca ya que se creo en css. Es clase genera error o exito
        notificacion.textContent = mensaje;  //y ese mensaje pasa a ser parte del text content. Se reemplaza hubo un error    //se crea una notificacion conel texto
    
        //Formulario
        formularioContactos.insertBefore(notificacion, document.querySelector('form legend'));  //este formulario contiene el form. 1.Toma lo QUE  se va a insertar. 2. y DONDE se va a insertar. ENTONCES voy a insertar la notificacion y DESPUES en el lado que quiero. va antes de nombre, empresa, telefono
    
        //Ocultar y mostrar la notificacion
        setTimeout(() => {    //Es una funcion que va a esperar cierto tiempo en ejecutar un codigo
            notificacion.classList.add('visible');       //le va a agregar una clase visible. forma de javascript para escribir
        setTimeout(() => {
            notificacion.classList.remove('visible');  
             setTimeout(() => {
                notificacion.remove(); //hace que JS remueva la notificacion cuando ya no se usa
            }, 500);
        }, 3000); //3000 a partir de 3 segundos desaparece
    
        }, 100); //100 es una decima parte de un segundo
    }