jquery 动态给div添加元素删除元素

//获取当前的添加文件的div id="fileList"

//<div id="fileList"></div>

var file_to=0;
function add_file()
{  
    //添加一行
    $("#fileList").append("<input id='file_"+file_to+"' type='file' name='upfile'/>");
     //添加删除按钮
    $("#fileList").append('<input type="button" value="删除" οnclick="del_file('+file_to+')" id="file_del_'+file_to+'" >');
    //添加换行
     $("#fileList").append('<br id="file_br_'+file_to+'"/>');
     file_to++;
    
}
function del_file(file_id)
{
    $("#file_"+file_id).remove();
    $("#file_del_"+file_id).remove();
    $("#file_br_"+file_id).remove();
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
以下是使用jQuery动态创建每行3个元素,并在每个元素上添加删除按钮的示例代码: HTML代码: ``` <div id="container"></div> ``` JavaScript代码: ```javascript // 定义一个数组,用于存储元素数据 var data = [ '元素1', '元素2', '元素3', '元素4', '元素5', '元素6', '元素7', '元素8', '元素9', ]; // 获取容器元素 var $container = $('#container'); // 遍历数据数组,创建元素并添加到容器中 $.each(data, function(index, value) { // 创建元素 var $item = $('<div class="item"></div>').text(value); // 创建删除按钮 var $deleteBtn = $('<button class="delete-btn">删除</button>'); // 绑定删除按钮的点击事件 $deleteBtn.on('click', function() { // 在数据数组中删除该元素的数据 data.splice(index, 1); // 在页面中删除该元素 $item.remove(); }); // 将删除按钮添加到元素中 $item.append($deleteBtn); // 将元素添加到容器中 $container.append($item); // 如果是每行的第3个元素,添加一个clearfix元素 if ((index + 1) % 3 === 0) { $container.append('<div class="clearfix"></div>'); } }); ``` CSS代码: ```css .item { float: left; width: 30%; margin-right: 3%; margin-bottom: 20px; border: 1px solid #ccc; padding: 10px; box-sizing: border-box; } .delete-btn { margin-left: 10px; } ``` 在上面的代码中,我们首先定义了一个数组来存储元素的数据。然后,我们获取容器元素,并使用`$.each`函数遍历数据数组,创建每个元素并添加到容器中。在创建元素时,我们还创建了一个删除按钮,并将其添加到元素中。我们还绑定了删除按钮的点击事件,以便在点击按钮时从数据数组中删除该元素的数据,并从页面中删除该元素。最后,我们还添加了一些CSS样式来指定元素和删除按钮的样式。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

apple_51426592

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值