Elementy dynamiczne, usuwanie w Jquery

Question

Cześć zastanawiam się nad pewną implementacją problemu. 
Ładuje sobie listę elmentów  dynamicznie w funkcji  dla przykładu dodaje ( append ) elementy do istniejącego diva jak poniżej 

 

<h2>Greetings</h2>
<div class="container">
  <div class="inner">Hello</div>
  <div class="append">Goodbye</div>
</div>

do diva clasy append, dodaje za pomocą funkcji dynamicznie elementy ( ładowane zależności od ilości na liście dajmy na to od 3- 10 możliwości ), elementy są pakowane w taki sposób. 
 

<div class="element">
  <a> link tag jakis </a>
</div>

i w czym u mnie jest problem, chodzi o to że w momencie kiedy kliknę link- usunąc się powinien cały element i tak się dzieje, jednak po usunięciu wszystkich kontenerów "element" pozostaje mi jeden div ostatni 

 <div class="append">Goodbye</div>

którego też chcę usunąć, jak można to zrobić dynamicznie? Co mam na mysli kiedy próbuje wprowadzić warunek, że jeśli element wewnętrzny posiada rodzica klasy append to wtedy usuwam append, ale to nie działa- ilosć dzieci dla rodzica non stop ma tę samą wartość tak jakby stan elementów mimo usuwania ze strony  funkcją remove się nie zmieniał? 

Z góry dzięki za pomyśl ( w przykładach pominąłem funkcje, etc to tylko ma obrazować problem ) .
Dodam że np funkcja length, czy zliczanie ilości dzieci dla kontenera jest stałe - tak jakby ono nie ulegalo zmianie w zalezności po usuwaniu, czyli jeśli na początku z listy do diva wpadną 3 elementy, mimo ich usuwania stan "dzieci" dalej pokazywał 3, istnieje możwliwość odświeżenia zawartości np? bez przeładowania strony o ile np pliki js nie są w tym samym pliku ?  Czy nie tędy droga 

Comments

Problem może tkwić w operowaniu na statycznej liście elementów. Ale strzelam, bo nie widzę kodu.

Answer 1

A próbowałeś z takim zapisem? .hasChildNodes() i .childElementCount

  if (element.hasChildNodes()) {
    if (element.childElementCount > 0) {
      element.removeChild(element.lastElementChild);
    }
  }

 CodePen