Remove all elements after current one in a div

Remove all elements after current one in a div

I am converting a flowchart into a list of selections using jquery, here
is my function -
$(document).ready(function() {
$('div#containerDiv').on('change', '.chainedSelection',function() {
var selectedVal = $(this).val();
if(parseInt(selectedVal) >= 0 && parseInt(selectedVal) <= 9){
$(this).nextAll().remove();
$("div#containerDiv").append(generateOutputText(selectedVal));
}else if(selectedVal != "-1"){
$(this).nextAll().remove();
$("div#containerDiv").append(generateText(selectedVal));
}
});
});
This list keeps on increasing until the selected value is a numeric and
once the value is numeric in the last selection list, it gives the
selected value as output. Everything working fine if user goes in one
direction only but if user changes value of previously selected item the
select lists are removed with $(this).nextAll().remove(); but rest of the
tags are still present.
So basically I want to remove everything current select element prior to
firing the event on change I want to clear everything after the current
select list.
Fiddle
Thanks