JQUERY如何删除上一个插入的元素并添加新元素

<div class="box"></div>
<div class="content">
    <p>我是内容1</p>
    <p>我是内容2</p>
    <p>...</p>
    <p>我是内容N</p>
</div>

box这个DIV是空的，但默认显示<p>我是内容1</p>，点击content DIV里的p插入当前所点击的P到box里，删除默认的<p>我是内容1</p>，再往下点，删除<p>我是内容2</p>，显示新点击插入的？请问如何用JQUERY实现。

---

$(".content").on('click','p',function(){
    var p_el = $(this);
    $(".box").append(p_el.clone(true));
    p_el.remove();
})

---

遍历content里面的p 为每个p添加click事件，将事件内容是将p内容html到box里面

---

$(".content p").click(function(){
$(".box").append($(this));
})