删除附加的元素

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>

当我将欧洲更改为亚洲时，附加的选择将消失，并且会附加下面的 selectmenu 。

<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');
});

DEMO