以下是使用
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样式来指定元素和删除按钮的样式。
92
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
