Отображаемые списки по JS

Question

Я хочу увидеть три разных списка в зависимости от того, какой из них я выберу. Проблема в том, что когда я хочу отобразить второй, первый не исчезает (я использовал remove ()). Может кто-нибудь помочь? И второй вопрос: есть ли более простой способ создать li в ul с помощью JS? Мой код слишком сложен, я думаю. * Я начинающий с JS, кстати.

function showList()
    {
        var games = document.getElementById("games").checked; // true;false
        var movies = document.getElementById("movies").checked; // true;false
        var series = document.getElementById("series").checked; // true;false

        if(games == true)
        {
            var exists = document.getElementsByTagName("ul");
            if (exists == true)
            {
                exists.remove();
            }

            var ul = document.createElement('ul');
            var li = document.createElement("LI");
            var content1 = document.createTextNode("Witcher");
            li.appendChild(content1);
            ul.appendChild(li);
            document.getElementById('box_list').appendChild(ul);

            var li2 = document.createElement("LI");
            var content2 = document.createTextNode("GTA V");
            li2.appendChild(content2);
            ul.appendChild(li2);
            document.getElementById('box_list').appendChild(ul);
        }
        if(movies == true)
        {
            var exists = document.getElementsByTagName("ul");
            if (exists == true)
            {
                exists.remove();
            }

            var ul = document.createElement('ul');
            var li = document.createElement("LI");
            var content1 = document.createTextNode("Matrix");
            li.appendChild(content1);
            ul.appendChild(li);
            document.getElementById('box_list').appendChild(ul);

            var li2 = document.createElement("LI");
            var content2 = document.createTextNode("The Lord of The Rings");
            li2.appendChild(content2);
            ul.appendChild(li2);
            document.getElementById('box_list').appendChild(ul);
        }
        if(series == true)
        {
            var exists = document.getElementsByTagName("ul");
            if (exists == true)
            {
                exists.remove();
            }

            var ul = document.createElement('ul');
            var li = document.createElement("LI");
            var content1 = document.createTextNode("Game of Throne");
            li.appendChild(content1);
            ul.appendChild(li);
            document.getElementById('box_list').appendChild(ul);

            var li2 = document.createElement("LI");
            var content2 = document.createTextNode("The Walking Dead");
            li2.appendChild(content2);
            ul.appendChild(li2);
            document.getElementById('box_list').appendChild(ul);
        }

    }

---

<input type="radio" name="list" id="games" onclick="showList()"/> Game <br/>
<input type="radio" name="list" id="movies" onclick="showList()"/> Movies <br/>
<input type="radio" name="list" id="series" onclick="showList()"/> Series <br/>

<p id="box_list">

</p>

Answer 1

ваш код немного грязный. Попробуйте использовать функции с несколькими строками, они будут более читабельными. Также старайтесь избегать события onclick внутри HTML, потому что это плохая практика (проверьте онлайн, почему). Наконец, используйте переменные вместо вызова document каждый раз. Для вашей проблемы я создал это решение:

var games = document.getElementById('games');
var movies = document.getElementById('movies');
var series = document.getElementById('series');
var boxList = document.getElementById('box_list');

games.addEventListener('click', () => addToList('a','b'));
movies.addEventListener('click', () => addToList('c','d'));
series.addEventListener('click', () => addToList('e','f'));
    
function addToList(...names){
         let ul = document.createElement('ul');
         for(let name of names){
            let li = document.createElement("li");
            let content = document.createTextNode(name);
            li.appendChild(content);
            ul.appendChild(li);
         }
         boxList.innerHTML = '';
	 boxList.appendChild(ul);
}

<input type="radio" name="list" id="games" /> Game <br/>
<input type="radio" name="list" id="movies"/> Movies <br/>
<input type="radio" name="list" id="series"/> Series <br/>

<p id="box_list">
</p>

Если вы не знакомы с javascript, ...names называется оператором распространения, и это полезно, когда вам приходится циклически перемещать список объектов (в данном случае некоторые строки)

Answer 2

Я сделал некоторые изменения, вы можете использовать это как HTML-файл.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <input type="radio" name="list" id="games" onclick="showList()" /> Game
    <br />
    <input type="radio" name="list" id="movies" onclick="showList()" /> Movies
    <br />
    <input type="radio" name="list" id="series" onclick="showList()" /> Series
    <br />

    <p id="box_list"></p>
    <script type="text/javascript">
      function showList() {
        var games = document.getElementById("games").checked; // true;false
        var movies = document.getElementById("movies").checked; // true;false
        var series = document.getElementById("series").checked; // true;false

        if (games == true) {
          var elem = document.querySelector("ul");
          elem && elem.parentNode.removeChild(elem);

          var ul = document.createElement("ul");
          var li = document.createElement("LI");
         
          li.innerHTML = "Witcher";
          ul.appendChild(li);
          document.getElementById("box_list").appendChild(ul);

          var li2 = document.createElement("LI");
          li2.innerHTML = "GTA V";
          ul.appendChild(li2);
          document.getElementById("box_list").appendChild(ul);
        }
        if (movies == true) {
          var elem = document.querySelector("ul");
          elem && elem.parentNode.removeChild(elem);

          var ul = document.createElement("ul");
          var li = document.createElement("LI");

          li.innerHTML = "Matrix";
          ul.appendChild(li);
          document.getElementById("box_list").appendChild(ul);

          var li2 = document.createElement("LI");
          li2.innerHTML = "The Lord of The Rings";
          ul.appendChild(li2);
          document.getElementById("box_list").appendChild(ul);
        }
        if (series == true) {
          var elem = document.querySelector("ul");
          elem && elem.parentNode.removeChild(elem);

          var ul = document.createElement("ul");
          var li = document.createElement("LI");

          li.innerHTML = "Game of Throne";
          ul.appendChild(li);
          document.getElementById("box_list").appendChild(ul);

          var li2 = document.createElement("LI");
          li2.innerHTML = "The Walking Dead";
          ul.appendChild(li2);
          document.getElementById("box_list").appendChild(ul);
        }
      }
    </script>
  </body>
</html>