Hola chicos estoy realizando una aplicación en la que se requieren estos puntos, pero solo tengo hecho lo básico, y no se si es correcto, lo suyo sería utilizar ***array push*** para añadir datos y ***splice*** para eliminarlos mientras se escribe en el input, pero, ¿Cómo aplicarlo de manera correcta?

***P.D.:*** el formulario lo tengo hecho en ***DOM***, pero como son demasiados caracteres y no me deja pegarlo, lo he hecho en html.

***Gracias de antemano...***

Aquí los puntos necesarios para que sea correcto :

**a)** Se escribe un ***mensaje de error*** la página (no un alert), si pulsan añadir y
eliminar y no se han rellenado ambos campos.

**b)** Si ***pulsan*** ***añadir*** se crea una nueva línea en el listado en forma de ***tabla***.

**c)** Si ***pulsan*** ***añadir*** y la persona ya está en la tabla, escribimos un mensaje de
error.

**d)** Si ***pulsan*** ***eliminar***, eliminamos la persona de la tabla, o avisamos en caso de
que no exista.

**e)** Si ***pulsan*** ***eliminar*** y la persona no existe en la tabla, escribimos un mensaje
de error.

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

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

    function guardar() {
        var nombre = document.getElementById('nombre').value;
        var apellido = document.getElementById('apellido').value;
        var resultado = document.getElementById('resultado');

    if (nombre.trim() == '') {
        resultado.innerHTML = 'No puedes dejar el nombre vacio';
        nombre.focus();
        //alert("ingrese el nombre");
    }
    if (apellido.trim() == '') {
        resultado.innerHTML = 'No puedes dejar el apellido vacio';
        apellido.focus();
    } else {
        var fila = "<tr><td>" + nombre + "</td><td>" + apellido + "</td>" + "</td></tr>";

        var btn = document.createElement("TR");
        btn.innerHTML = fila;
        document.getElementById("tablita").appendChild(btn);
    }
    }


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

    <html lang="es"><head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Ejercicio-2</title>
        <link rel="stylesheet" href="style.css">
        <script src="ejercicio2.js"></script>
    </head>
    <body>
       

    <div class="contenedor-principal" id="contenedor">
    <form id="formulario" action=" ">
        <input type="text" name="nombre" placeholder="Nombre" id="nombre">
        <input type="text" name="apellido" placeholder="apellido" id="apellido">
        <button type="button" name="añadir" onclick="guardar()" id="Añadir">Añadir</button>
        <button type="button" name="eliminar" id="eliminar">Elminar</button>
    </form>
      <br>
      <table border="1">
        <thead>
          <tr>
                <th>Nombre</th>
                <th>Apellido</th>
              </tr>
              </thead>
                  <tbody id="tablita">
              </tbody>
              </table>
          </div>
        </body>
     </html>

<!-- end snippet -->