Не могу удалить элементы (DOM)

Есть задание на подобии разработать струткуру типа дерево и чтобы оно отображалось на экране. В качестве элемента я выбрал список <ul> при нажатии на который в него вставляется некоторые <li> с данными, вставлять мне получается, но вот удалять эти элементы нет.

Возле <ul> есть крестик если на него нажимаешь тогда вставляем в список новые <li> если отжимаешь крестик, мне нужно проверить существует ли в этом <ul> какие-то элементы если существуют тогда этот список открыт и при нажатии на крестик его нужно закрыть путем удаления все childNode, но удалять у меня не получается.

Вот Код:

Код (Text):

1.  
2.  function showCity(cityName, cityId)
3.  {
4.     // cityId это идентификатор <ul> списка
5.     // cityName это просто значение которое нужно выбрать из массива,
6.     // оно роли не играет
7.     var el = document.getElementById(cityId).childNodes;
8.  
9.     // Перед тем как, что-то добавить нужно все удалить
10.     // В этот цыкл вообще не заходит
11.     while(el.firstChild)
12.     {
13.         el.removeChild( el.firstChild );
14.     }
15.    
16.     // city это просто массив из которого нужно выбрать значения,
17.     // он роли не играет
18.     for (i = 1; i < city.length; i++)
19.     {
20.         if(city[i].city == cityName)
21.         {
22.             var li = document.createElement("li");
23.             var liText = document.createTextNode(city[i].churchName);
24.            
25.             li.appendChild(liText);
26.             document.getElementById(cityId).appendChild(li);
27.         }
28.     }
29.  }

Кто знает в чем дело?