Как заменить один список на другой в JS?

Мне нужно заменить один список с персонажами на другой. Допустим, вводим имя или букву персонажа — выводится список. Потом стираем и набираем другое имя или букву — и к имеющемуся списку добавляется еще один, в итоге получается длинная портянка. Мне нужно при каждом новом вводе создавать новый список, стирая то, что было найдено ранее. Как это сделать?

<div class="content">

  <div class="search">
    <div class="search_form">
      <label>Поиск персонажа:
        <input type="text" class="person_search" id="person_search_input">
      </label>
      <button id="search_request_btn" class="button">Найти</button>
    </div>
    <ul class="search_result"></ul>
  </div>

  <div class="person_data">
    <div>Имя: <span id="name"></div>
    <div>Рост: <span id="height"></div>
    <div>Вес: <span id="mass"></div>
    <div>Год рождения: <span id="birth_year"></div>
    <div>В скольки фильмах появлялся: <span id="films_count"></div>
  </div>
</div>

let searchResult = document.querySelector(".search_result");
let input = document.querySelector("input");
let searchPerson = document.querySelector("#person_search_input");
let btn = document.querySelector(".button");
let persons;

btn.addEventListener("click", function(ev) {
    ev.preventDefault();
    if (searchPerson.value == "") {
        alert("Введите имя персонажа 'Звездных войн'");
        return false;
    } else {

    }
    fetch(`https://swapi.dev/api/people/?search=${searchPerson.value}`)
        .then(function(response) {
            //console.log(response);
            return response.json();
        })
        .then(function(data) {     
            persons = data.results;
            persons.forEach(item => {
                console.log(item);
                addLi(item);
                // попытка замены одного списка на другой
                if (!searchResult === null) {
                    let ul = document.querySelector(".search_result");
                    let newUl = ul;
                    ul.replaceWith(newUl);
                }
            })
            searchResult.addEventListener("click", function(ev) {
                if (ev.target.tagName == 'LI') {
                    let selectedName = ev.target.tagName = ev.target.innerText;
                    let selectedPerson = persons.find(item => item.name == selectedName);
                
                    document.getElementById("name").textContent = selectedPerson.name;
                    document.getElementById("height").textContent = selectedPerson.height;
                    document.getElementById("mass").textContent = selectedPerson.mass;
                    document.getElementById("birth_year").textContent = selectedPerson.birth_year;
                    document.getElementById("films_count").textContent = selectedPerson.films.forEach(item => {
                        fetch(item).then(function(response) {
                            return response.json();
                        }).then(function(data) {
                            console.log(data);
                            document.getElementById("films_count").innerHTML += `<p>${data.title}</p>`;
                        });
                    })
                }
            })
        })
        .catch((err) => {
            console.log('Fetch Error', err);
        });
})

function addLi(item) {
    let li = document.createElement("li");
    li.className = "createLi";
    li.textContent = item.name;
    searchResult.append(li);
}