小程序动态添加input，和删除指定的input

wxml代码（input和删除按钮都需要绑定data-id=’{{index}}’）

	
    
      
        案例属性
        添加属性
      
      
        
          
          
          删除
        
      
    
  

wxss

.imgs-containor {
  background-color: #fff;
  flex-direction: row;
  justify-content: flex-start;
  border-radius: 15rpx;
  margin: 20rpx;
  padding-left: 8rpx;
  padding-top: 8rpx;
  padding-bottom: 8rpx;
}

.input-item {
  padding: 20rpx;
  line-height: 2;
  display: flex;
  font-size: 30rpx;
  border-top: 1rpx solid #e8e8e8;
}

.input-item.input-item-full {
  display: block;
}

.add-attribute {
  display: flex;
}

.input-item-label {
  display: block;
  width: 5em;
  color: #666;
}

.case-attribute {
  display: flex;
}

.create-key {
  border: 1rpx solid #ddd;
  width: 70%;
  height: 30px;
  margin: 15px 20px 0 10px;
  padding-left: 6px;
}

js代码

data: {
    lists: [{
      attribute: ''
    }],
  },
  onLoad: function() {},
/** input失去焦点后获取input的值 */
  inputBlur(event) {
    var nowId = event.currentTarget.dataset.id; //获取当前索引
    console.log("失去聚焦的input的id------" + nowId)
    var val = event.detail.value; //获取输入的值
    console.log("失去聚焦的input的值------" + val)
    var oldVal = this.data.lists;
    oldVal[nowId].attribute = val; //修改对应索引值的内容
    console.log("-----------------" + JSON.stringify(oldVal))
    this.setData({
      lists: oldVal
    })
    console.log("lists-----------------" + JSON.stringify(oldVal))
  },

  /** 添加属性输入框 */
  addList: function() {
    var that = this
    setTimeout(function() {
      //要延时执行的代码
      console.log('数组中最后一个元素的值----' + that.data.lists[that.data.lists.length - 1].attribute)
      if (that.data.lists[that.data.lists.length - 1].attribute != '' && that.data.lists[that.data.lists.length - 1].attribute != null) {
        var lists = that.data.lists;
        var newData = {
          attribute: ''
        };
        lists.push(newData); //实质是添加lists数组内容，使for循环多一次
        that.setData({
          lists: lists,
        })
        console.log("lists-------" + that.data.lists.length)
      } else {
        console.log("属性内容不能为空，请在输入框中填写案例属性")
        wx.showModal({
          title: '提示',
          content: '属性内容不能为空，请在输入框中填写案例属性',
          success(res) {
            if (res.confirm) {
              console.log('用户点击确定')
            } else if (res.cancel) {
              console.log('用户点击取消')
            }
          }
        })
      }
    }, 100)
  },

  /** 删除属性输入框 */
  delList: function(event) {
    //获取数据绑定的data-id的数据
    console.log("input最大id------------" + event.currentTarget.dataset.id.maxDuration)
    console.log("lists-------" + this.data.lists.length)
    const nowIndex = event.currentTarget.dataset.id;
    console.log('nowIndex--------' + nowIndex)
    let lists = this.data.lists;
    lists.splice(nowIndex, 1);
    this.setData({
      lists
    })
    // let lists = this.data.lists;
    // lists.pop(); //实质是删除lists数组内容，使for循环少一次
    // this.setData({
    //   lists: lists,
    // })
  }

最后效果