javascript - 移除附加元素

Question

我正在做一个相关的多级选择。

当 select 的值发生变化时，将会有另一个 select。在创建它之前，我想删除它之后的所有先前选择。但它不起作用。我尝试过类似的东西.siblings()或.next()做实验，它们也不起作用。有什么问题或者有什么更好的方法来实现我的想法？

$('li').on("change", "select", function () {
  $(this).nextAll().remove(); //remove all the previous selects after which is changed.
  $(this).parents('li').append('<select data-mini="true"><option value="111">aaaa</option><option value="222">bbbb</option></select>').trigger('create');
});

像这样的东西。

<select>
  <option>Europe</option>
  <option>Asia</option>
</select>

<!-- appended select -->

<select>
  <option>France</option>   
  <option>Germany</option>
</select>

当我将欧洲更改为亚洲时，附加的选择消失并附加了下面的选择菜单。

<select>
  <option>China</option>
  <option>Japan</option>
</select>

Answer 1

尝试这个，

$('li').on("change","select",function(){
    $(this).closest('ul').find('select').remove();  
    $(this).closest('li').append('<select data-mini="true"><option value="111">aaaa</option><option value="222">bbbb</option></select>')
    .trigger('create');
});

Answer 2

保存父级，因为在删除这个和兄弟级之前

$('li').on("change", "select", function () {
    var parLi = $(this).closest('li'); //saving parent
    $(this).siblings().remove().end().remove();
    parLi.append('<select data-mini="true"><option value="111">aaaa</option><option value="222">bbbb</option></select>').trigger('create');
});

演示