jquery实现加减行

用jquery方法实现加减行
DOM层：

  <ul class="plusMinusLinesWrap">
        <li>
            <div>我是一行</div>
            <div class="btnIcon jianBtn"></div>
        </li>
        <li>
            <div>我是一行</div>
            <div class="btnIcon jianBtn"></div>
        </li>
        <li>
            <div>我是一行</div>
            <div class="btnIcon jiaBtn"></div>
        </li>
    </ul>

css代码：

.plusMinusLinesWrap{
     font-size: 0;
     width: 100px;
     background:#1890ff;
     border-radius: 4px;
     position:absolute;
     top: 50px;
     left: 50%;
     padding: 10px;
    li{
        height: 32px;
        border-bottom: 1px solid #dddddd;
        line-height: 32px;
        div{
            font-size: 12px;
            font-family: SourceHanSansCN-Bold, SourceHanSansCN;
            font-weight: bold;
            color: #FFFFFF;
            display:inline-block;
        }
    .btnIcon{
        width: 12px;
        height: 12px;
        float:right;
        margin-top: 9px;
        cursor: pointer;
    }
    .jianBtn{
        background:url("../img/jian-icon.png") no-repeat;
        background-size: 100% 100%;
    }
    .jiaBtn{
        background:url("../img/jia-icon.png") no-repeat;
        background-size: 100% 100%;
    }
    }
 }

jquery方法：

 $(function () {
 // 加减行
  $('.plusMinusLinesWrap').on('click', '.jiaBtn', function () {
            var html = `
                 <li>
                 <div>我是一行</div>
                 <div class="btnIcon jiaBtn"></div>
                 </li>`
            $(this).parent().after(html);
            $(this).removeClass('jiaBtn').addClass('jianBtn');
        })
        $('.plusMinusLinesWrap').on('click', '.jianBtn', function () {
            $(this).parent().remove()
        })
    })

实现效果如下：

下次在遇到这样的需求时，代码直接就可以复用啦，也可以提高一下开发效率。如果小伙伴们有更好的实现方式可以交流交流啊。每天都要进步一点点！

标签：jquery,jianBtn,12px,实现,100%,加减,background,font,size
来源： https://blog.csdn.net/HuLuWa1997/article/details/115516475