Displayed lists by JS

Question

I want to see three different lists depending on which one I choose. The problem is that when I want to display the second one, the first one does not disappear (I used remove() ). May someone help? And the second question is, is there an easier way to create li in ul with JS? My code is overcomplicate I guess. *I'm beginner with JS btw.

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

your code is a bit messy. Try to use functions with few lines, they will be more readable. Also try to avoid the onclick event inside HTML because it's a bad practice (check online why). Finally use variables instead of calling document every time. For your problem I created this solution:

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>

If you are unfamiliar with javascript, the ...names is called spread operator and it's useful when you have to cycle a list of object (in this case some strings)

Answer 2

I did some edit, you can use this as an html file.

<!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>