Uso de Arrays para almacenar datos

1. El array tiene que ser una variable global para estar disponible en todo el script
2. Antes de guardar el dato es necesario validarlo
3. Lo pasamos al array
4. Llamamos a las funciones que actualizan los listados en el documento
5. Mostramos un mensaje de estado

let contactos = ["Alberto", "Lena", "Nico"];
function addContacto() {
  let mensaje = "";
  let clase = "";
  let contacto = document.querySelector("#in_nombre").value;
  contacto = validaTexto(contacto);
  if (contacto) {
    contactos.push(contacto);
    creaListado();
    creaSelect();
    mensaje = "Contacto añadido al listado";
    clase = "confirma";
  } else {
    mensaje = "Dato no válido";
    clase = "error";
  }
  muestraMensaje(mensaje, "#mens-intro", clase);
}

function validaTexto(texto) {
  let validado = texto.trim();
  while (validado.indexOf("  ") != -1) {
    validado = validado.replaceAll("  ", " ");
  }
  if (validado.length < 3) {
    return false;
  }
  return validado;
}
                

A esta función podemos acceder desde un botón que genere el listado, y también podemos llamarla cada vez que añadimos un contacto nuevo a la lista

1. Preparo bucle para el array
2. En cada iteración genero un elemento li
3. Cuando termina el bucle añadimos el listado al DOM
4. Para ocultarlo eliminamos el elemento ul del DOM

function creaListado() {
  ocultaListado();
  const listado = document.createElement("ul");
  for (let i = 0; i < contactos.length; i++) {
    const contacto = contactos[i];
    const elemento_lista = document.createElement("li");
    elemento_lista.textContent = contacto;
    listado.append(elemento_lista);
  }
  document.querySelector(".lista-contactos").append(listado);
  muestraMensaje("listado actualizado", "#mens-lista");
}

function ocultaListado() {
  document.querySelector(".lista-contactos").innerHTML = "";
  muestraMensaje("Listado  cerrado correctamente", "#mens-lista");
}
function muestraMensaje(mensaje, selector, clase) {
  document.querySelector(selector).textContent = mensaje;
  let estilo = clase ? "mensajes " + clase : "mensajes";
  document.querySelector(selector).className = estilo;
}
          

El primer paso es generar el desplegable al pulsar un botón, luego añadimos las funciones para eliminar o editar el elemento seleccionado

1. Necesitamos un bucle como en el pirmer apartado pero para generar elementos option en lugar de li
2. El botón elminar borra del array elemento seleccionado, y a continuación reconstruye la lista de contactos y el select
3. Actualizar hace lo mismo, pero modificando la entrada correspondiente del array

function creaSelect() {
  vaciaSelect();
  for (let i = 0; i < contactos.length; i++) {
    const contacto = contactos[i];
    const elemento_lista = document.createElement("option");
    elemento_lista.textContent = contacto;
    elemento_lista.setAttribute('value', i);
    document.querySelector('#sel_contacto').append(elemento_lista);
  }
  
  muestraMensaje('listado creado correctamente', '.mens-select');
}
function vaciaSelect() {
  document.querySelector('#sel_contacto').innerHTML = '';
}
function eliminaContacto() {
  let posicion = parseInt(document.querySelector('#sel_contacto').value);
  let eliminar = confirm('Confirma eliminar a ' + contactos[posicion]);
  if (eliminar) {
    contactos.splice(posicion, 1);
    creaListado();
    creaSelect();
    muestraMensaje('Contacto eliminado correctamente', '.mens-select');
  } else {
    muestraMensaje('Operación Cancelada', '.mens-select');
  }
}
function editaContacto() {
    let posicion = parseInt(document.querySelector('#sel_contacto').value);
    nuevo_contacto = prompt('Actualiza los datos', contactos[posicion]);
    nuevo_contacto = validaTexto(nuevo_contacto);
  if (nuevo_contacto) {
    contactos.splice(posicion,1,nuevo_contacto);
    creaListado();
    creaSelect();
    muestraMensaje('Contacto editado correctamente', '.mens-select');
    } else {
    muestraMensaje('Datos no válidos. No se puede editar el contacto', '.mens-select', 'error');
    }
}