javascript - 用新的克隆元素替换克隆元素

Question

使用 Jquery，我正在尝试添加一个克隆元素并删除以前添加的元素。添加克隆元素有效，但删除先前添加的元素无效（它删除了所有克隆元素）。我正在使用“not()”函数，但它没有按我的意愿过滤。

我在网上搜索但找不到解决方案，因此非常感谢您的帮助！

--HTML--

<div id="clone-container">
   <!--cloned element comes here-->
</div>

<div id="original-container">
    <ul>
        <li>
            <span>Value1</span>
        </li>
        <li>
            <span>Value2</span>
        </li>
        <li>
            <span>Value3</span>
        </li>
    </ul>   
</div>

--jquery--

$(document).ready(function(){

    $('#original-container > ul > li').click(function(event){

       //for adding clone elements
       var $selected_clone = $(this).children("span").clone();

       $selected_clone.appendTo("#clone-container > ul > li");


       // for removing previously added elements
       $("#clone-container > ul > li > span").not($selected_clone).remove();

    });
});

Answer 1

删除appendTo代码执行并替换下面

$("#clone-container > ul > li > span").not($selected_clone).remove();

和

$("#clone-container > ul > li > span").html($selected_clone.html());

希望这会有所帮助！

Answer 2

看看这个.. http://jsbin.com/uZij/1/

HTML

  <div id="clone-container">
    <ul>
      </ul>
   <!--cloned element comes here-->
</div>

<div id="original-container">
    <ul>
        <li>
            <span>Value1</span>
        </li>
        <li>
            <span>Value2</span>
        </li>
        <li>
            <span>Value3</span>
        </li>
    </ul>   
</div>

jQuery

$(document).ready(function(){

    $('#original-container > ul > li').click(function(event){

       //for adding clone elements
       var $selected_clone = $(this).clone();
       $selected_clone.appendTo("#clone-container > ul");


       // for removing previously added elements
       $("#clone-container > ul > li").not($selected_clone).remove();

    });
});