微信小程序动态添加删除指定组件

这个问题困惑了我两天，网上关于这方面也很少，不能删除指定组件，只能删除最后一个，参考一个师兄的方法，问题终于解决了。代码关键在删除键放在组件外，每删除一个，要重新遍历数组，贴一下师兄的代码：

//wxml

<view>

      <input class="input"

            placeholder="请输入添加内容" 

            value="{{content}}"

            bindinput="addInput">

      </input>

      <button bindtap="btnAdd">添加</button>

</view>

<!-- 内容展示与删除 -->

<view  class="container">

      <block wx:for="{{dailyList}}" 

            wx:for-index="index" 

            wx:key="index"

            wx:for-item="item">

            <view>

                  <button size='mini' 

                        class="btnDel"

                        bindtap="btnDel"

                        data-index="{{index}}"//将index传给绑定事件

                        >删除

                  </button>//删除键放在组件外，才可以监听每次删除哪个组件

                  <my-cpn content="{{item}}"/>//在这里才引入组件

            </view>

      </block>

</view>

//js

Page({

  data: {

    content:"",

    addinput:'',

    dailyList:[]

  },

  // 获取input内容

  addInput:function(event){

    console.log(event)

    console.log(this.data.dailyList.length)

    this.setData({

      addinput:event.detail.value

    })

  },

  // 添加按钮

  btnAdd:function(){

    var list=this.data.dailyList

    if (this.data.addinput){

    list.push(this.data.addinput)

    this.setData({

      dailyList:list,

      content:"",

      addinput: ''

    })

  }

  },

  //删除按钮

  btnDel:function(event){

    console.log(event)

    var index=event.target.dataset.index

    var list= this.data.dailyList

    var remove=list.splice(index,1)

    this.setData({

      dailyList:list

    })

  }

 

})