微信小程序添加、删除元素（附带图片）_微信小程序清除删除的节点

微信小程序添加、删除元素

大家好，今天我们来学习一下添加、删除元素，好好看，好好学，超详细的。（纯前端）

直接上代码吧（里面有字体图标，小伙伴自己到图标库去找，我用的是阿里的图标库）

<view class="wrap" wx:for="{{productList}}" wx:key="id">
    <view class="wrap-titleItem border">
      <view class="wrap-title">商品</view>
      <view class="wrap-input">
        <view class="input-item">
          <view class="input" style="flex: 1;">
            <input style="padding-left: 20rpx;" type="text" placeholder-class="placeholder" placeholder="请输入商品"
              data-idx='{{index}}' value='{{productList[index].allName}}' id="allName" bindinput='bindChanguser' />
          </view>
        </view>
      </view>
    </view>
    <view class="wrap-titleItem border">
      <view class="wrap-title">价格</view>
      <view class="wrap-input">
        <view class="input-item">
          <view class="text-item">￥</view>
          <view class="input" style="flex: 1;">
            <input style="padding-left: 20rpx;" type="number" placeholder-class="placeholder" placeholder="价格"
              data-idx='{{index}}' value='{{productList[index].price}}' id="price" bindinput='bindChanguser' />
          </view>
        </view>
      </view>
    </view>

    <view class="wrap-titleItem border">
      <view class="wrap-title">人数</view>
      <view class="wrap-input">
        <view class="input-item">
          <view class="text-item">满</view>
          <view class="input" style="width: 100rpx;">
            <input style="padding-left: 20rpx;" type="number" placeholder-class="placeholder" placeholder="多少"
              bindblur="blur" data-idx='{{index}}' value='{{productList[index].people}}' id="people"
              bindinput='bindChanguser' />
          </view>
          <view class="text-item">人</view>
        </view>
      </view>
    </view>

    <view class="wrap-titleItem">
      <view class="wrap-title">时间限制</view>
      <view class="wrap-input">
        <view class="input-item" style="width:100%;">
          <view class="input" style="width: 70rpx;">
            <input type="number" placeholder-class="placeholder" placeholder="时间" maxlength="4" data-idx='{{index}}'
              value='{{productList[index].time}}' id="time" bindinput='bindChanguser' />
          </view>
          <view class="text-item">分钟后失效</view>
        </view>
      </view>
    </view>

    <view class="wrap-iconItem">
      <view class="add-item" style="color: rgb(0, 131, 198);display:{{productList.length === 1?'none':'block'}};"
        data-idx='{{index}}' bindtap="delList">
        <text class="iconfont iconhuishouzhan" style="font-size: 24rpx;"></text>删除商品
      </view>
      <view class="add-item" style="color: rgb(0, 131, 198);display:{{productList[index].showView?'none':'block'}}"
        data-idx='{{index}}' bindtap="onAdd">
        <text class="iconfont iconplus1" style="font-size: 24rpx;"></text>添加商品
      </view>
    </view>
  </view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

.wrap {
  width: 100%;
  border-radius: 20rpx;
  font-size: 28rpx;
  background-color: #fff;
  margin-top: 20rpx;
  padding-bottom: 30rpx;
}

.wrap-titleItem {
  width: 100%;
  height: 120rpx;
  line-height: 120rpx;
  border-bottom: 2rpx solid rgb(181, 181, 181);
  display: flex;
  padding-right: 20rpx;
}

.wrap-title {
  height: 100%;
  width: 200rpx;
  color: rgb(16, 16, 16);
  font-size: 32rpx;
  padding-left: 30rpx;
  border: 0rpx solid red;
}

.wrap-input {
  flex: 1;
  border: 0rpx solid red;
  padding-left: 50rpx;
  color: rgb(125, 125, 125);
}

.wrap-input input {
  height: 100%;
  width: 100%;
}

.input-item {
  height: 100%;
  border: 0rpx solid red;
  display: flex;
}

.text-item {
  height: 100%;
  line-height: 120rpx;
  float: left;
  color: #000;
}

.input {
  height: 100%;
  float: left;
}

.border {
  border-bottom: 2rpx solid #b5b5b5;
}

.wrap-iconItem {
  width: 100%;
  line-height: 50rpx;
  font-size: 28rpx;
  text-align: center;
  color: rgb(16, 16, 16);
  margin-top: 20rpx;
  opacity: 0.6;
  display: flex;
  justify-content: center;
}

.add-item {
  width: 45%;
  font-size: 24rpx;
  border: 0rpx solid red;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78

data: {
	 productList: [{
      "allName": '',
      "price": '',
      "people": '',
      "time": '',
      "showView": false
    }], //活动商品
},
//添加活动商品
  onAdd(e) {
    let productList = this.data.productList;
    let checkboxList = this.data.checkbox;
    let index = e.currentTarget.dataset.idx;
    console.log(productList[index].allName)
    if (productList[index].price == '' || productList[index].people == '' || productList[index].time == '' || productList[index].allName == '') {
      wx.showToast({
        title: '请填写完内容，再添加活动商品',
        icon: 'none',
        duration: 2000
      })
    } else {
      // console.log(index)
      let newData = {
        "allName": '',
        "price": '',
        "people": '',
        "time": '',
        "showView": false
      };
      if (productList.length >= 5) {
        wx.showToast({
          title: '最多添加5个商品',
          icon: 'none',
          duration: 2000
        })
        return;
      }
      productList.push(newData);
      console.log(this.data.productList[index].showView)
      this.data.productList[index].showView = !this.data.productList[index].showView;
      console.log(this.data.productList[index].showView)
      this.setData({
        productList,
      })
    }

  },

  // 删除元素
  delList(e) {
    var nowidx = e.currentTarget.dataset.idx; //当前索引
    var newList = this.data.productList[nowidx];
    console.log(this.data.productList[nowidx])
    if (nowidx > 0) {
      if (newList.showView === false) {
        this.data.productList[nowidx - 1].showView = false;
      }
    }

    var productList = this.data.productList;
    productList.splice(nowidx, 1);
    this.setData({
      productList
    })
  },

    //获取input的值
    bindChanguser(e) {
      console.log(e.detail.value)
      let productList = this.data.productList;
      var index = e.currentTarget.dataset.idx; //获取当前索引
      var type = e.currentTarget.id; //状态
      let value = e.detail.value;
      console.log(type);
      productList[index][type] = value
      if (type == 'time' && value >= 1440) {
        console.log(type)
        wx.showToast({
          title: '时间限制范围为1~1440',
          icon: 'none',
          duration: 2000
        })
        return;
      }
    },
  
    blur: function (e) {
      let productList = this.data.productList;
      var index = e.currentTarget.dataset.idx;
      var type = e.currentTarget.id;
      if (type == 'people') {
        if (productList[index].people <= 1) {
          productList[index].people = ''
          this.setData({
            productList: productList
          })
          wx.showToast({
            title: '拼团人数不能少于2人',
            icon: 'none',
            duration: 2000
          })
        }
      }
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105

如图所示：

结语

关于微信小程序添加、删除元素就介绍到这里 ，欢迎大家多多指教，互相交流，一起学习