Ассоциативный массив. Как найти значение через input удалить и добавить другое?

let arrayFamily = {
  father: "Slava",
  mather: "Sveta",
  firstChild: "Ksusha",
  secondChild: "Elisey",
  //TODO thirdChild: "Eseniya",
  fourthChild: "Borya"
};

let outArray = document.querySelector(".out-array-list");
let allOutItems = document.querySelectorAll("li.out-array-item strong");
let outArrayInput = document.querySelector(".out-array-input");
let outArrayInputId = document.getElementById("edit");
let add = document.querySelector(".add");
let remove = document.querySelector(".remove");
let reset = document.querySelector(".reset");

reset.onclick = () => {
  outArrayInput.value = "";
};

// arrayFamily.fourthChild = "";

remove.addEventListener("click", () => {
  arrayFamily.fourthChild = "";
});

let out = "";
for (let key in arrayFamily) {
  let itemI = document.createElement("li");
  itemI.classList.add("out-array-item");
  let itemIPerson = document.createElement("small");
  itemIPerson.classList.add("out-array-person");
  itemIPerson.textContent = key + ": ";
  let itemIName = document.createElement("strong");
  itemIName.classList.add("out-array-name");
  itemIName.textContent = arrayFamily[key];
  outArray.append(itemI);
  itemI.append(itemIPerson);
  itemI.append(itemIName);

  // out += `
  //    <li class="out-array-item">
  //        <small class="out-array-person">${key}: </small>
  //        <strong class="out-array-name">${arrayFamily[key]}</strong>
  //    </li>
  //    `;
}

// outArray.insertAdjacentHTML("beforeend", out);

.btn {
  font: 500 1.24em/1 "Poppins", Tahoma, Geneva, Verdana, sans-serif;
  text-transform: uppercase;
  border: 2px solid;
  cursor: pointer;
  outline: transparent;
  color: var(--text, #ffffff);
  background-color: var(--bg, var(--brand));
  padding: 0.5rem 1rem;
  -webkit-transition: color 0.4s ease 0s, background-color 0.4s ease 0s;
  transition: color 0.4s ease 0s, background-color 0.4s ease 0s;
}

.btn:hover {
  color: var(--text-hover, #ffffff);
  background-color: var(--bg-hover, var(--brand-hover));
}

.btn[data-type="get"] {
  --text: #20c997;
  --bg: #d63384;
  --text-hover: #0d6efd;
  --bg-hover: #0dcaf0;
}

.btn[data-type="push"] {
  --bg: #33c3d6;
  --text-hover: #fd0ddd;
  --bg-hover: #f0bb0d;
}

.btn[data-type="reset"] {
  --bg: #33c3d6;
  --bg-hover: #e80df0;
}

.btn[data-type="add"] {
  --bg: #33d63b;
  --bg-hover: #0d2ff0;
}

.btn[data-type="remove"] {
  --bg: #d63333;
  --bg-hover: #438b00;
}

.block-third {
  width: min(100% - 1rem, 400px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 25px 0;
}

.block-third>* {
  isolation: isolate;
}

.family {
  font-size: 2em;
  font-weight: 500;
  text-transform: uppercase;
}

.out-array {
  align-self: flex-start;
}

.out-array-item:nth-child(1)::marker {
  content: "?";
}

.out-array-item:nth-child(2)::marker {
  content: "?";
}

.out-array-item:nth-child(3)::marker {
  content: "?";
}

.out-array-item:nth-child(4)::marker {
  content: "?";
}

.out-array-item:nth-child(5)::marker {
  content: "?";
}

.out-array-slot {
  position: relative;
  max-width: 300px;
  width: 100%;
  height: 50px;
  display: grid;
  grid-template-areas: "edit";
  align-items: center;
  border-radius: 6px;
  box-shadow: -5px -5px 15px rgba(255, 255, 255, 0.1), 5px 5px 15px rgba(0, 0, 0, 0.35);
}

.out-array-label {
  position: absolute;
  left: 10px;
  grid-area: edit;
  justify-self: flex-start;
  transition: all 0.4s ease 0s;
  z-index: 1;
}

.out-array-input {
  height: 100%;
  font-size: 1em;
  letter-spacing: 1.1px;
  border: 1px solid transparent;
  border-radius: 6px;
  outline: transparent;
  padding: 0 10px;
}

.out-array-input:valid,
.out-array-input:focus {
  border-color: var(--red);
}

.out-array-input:valid~.out-array-label,
.out-array-input:focus~.out-array-label {
  font-size: 0.8em;
  border: 1px solid var(--red);
  border-radius: 6px;
  color: var(--red);
  background: #ffffff;
  translate: -5px -25px;
  padding: 0 10px;
}

<section>
  <h2>Associative Arrays</h2>
  <div class="block-third box" style="--b:3;">
    <span class="family">family</span>
    <div class="out-array">
      <ul class="out-array-list"></ul>
    </div>
    <div class="log"></div>
    <div class="out-array-slot">
      <input class="out-array-input" id="edit" type="text" value="" required>
      <label class="out-array-label" for="edit">Edit list</label>
    </div>
    <div class="out-array-buttons">
      <button class="reset btn" type="button" data-type="reset">Reset</button>
      <button class="add btn" type="button" data-type="add">Add</button>
      <button class="remove btn" type="button" data-type="remove">Delete</button>
    </div>
  </div>
</section>