JQUERY如何实现点击插入，再点击删除呢？

Question

<div class="box">
    <div class="text"></div>
    <ul>
        <li>我是内容1</li>
        <li>...</li>
        <li>我是内容N</li>
    </ul>
</div>

HTML结构如上所示，想要实现的效果是，点击其中一个LI会把当前点击的LI加上<p class="li-text">文字</p>的形式插进<div class='text'></div>并给当前点击的li加上个class='cur'，最多只能点击三次li，以及插入三个到text中。问题是，如何在当前点击li之后插入完成，再点击删除当前插入的内容呢？求解，非常感谢！~

Answer 1

1. 首先，鉴于jQuery是命令式的库，所以建议你把需求一条条列出来，这样就知道每一步该干嘛了，以及做进一步的优化。那么这里就有：

   1. 点击其中一个LI
   2. 把当前点击的LI加上个class='cur'
   3. <p class="li-text">文字</p>插进<div class='text'></div>
   4. 最多只能点击三次li，插入三个到text中
   5. 在当前点击li之后插入完成，再点击删除当前插入的内容

2. 这里会发现题主的叙述很乱，这一般也是为什么写不出来代码的原因。这步来分析下上一步的整理出来的需求：

   1. 点击li，肯定需要事件监听
   2. 在事件回调里使用$(this)可以抓到当前事件发生的元素，加class就不用说了吧
   3. 不多说
   4. 是“每个li只能点击3次”还是“所有的li总共点击3次”？这个可以在ul或者每个li加个data属性来存储次数，然后每次事件回调的时候读下次数判断就行了
   5. 加入的p直接绑个回调$(this).remove()自删除

Answer 2

<div class="box">
    <div id="showText" class="text"></div>
    <ul id="liParent">
        <li>我是内容1</li>
        <li>...</li>
        <li>我是内容N</li>
    </ul>
</div>

$('#liParent').on('click' , 'li' , function(e){ 
   var text = e.target.textContent;
   var p = $('<p class="li-text">'+ text +'</p>');
   p.on('click',function(){
     p.remove();
   });
  $('#showText').append(p);
});

https://codepen.io/randyou/pe...

Answer 3

试试用data()保存在当前li中，点击的时候判断是否有对应的节点，有的话移除，否则添加