正文

jquery写可增加内容也可删除

优站号
优站号 V管理员 /0 评论 /51 阅读
0313
欧意国内注册

在网页开发中，我们经常需要创建一个可以动态添加和删除内容的列表，这可以通过使用jQuery来实现，jQuery是一个强大的JavaScript库，它简化了HTML文档遍历、事件处理、动画制作等操作。

以下是一个简单的示例，展示了如何使用jQuery创建一个可增加内容也可删除的动态列表：

<!DOCTYPE html>
<html>
<head>
    <title>jQuery动态列表</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <h1>动态列表</h1>
    <input type="text" id="newItem" placeholder="输入新项目">
    <button id="addItem">添加项目</button>
    <ul id="dynamicList"></ul>
    <button id="removeItem">删除选中项目</button>
    <script>
        $(document).ready(function(){
            $('#addItem').click(function(){
                var newItem = $('#newItem').val();
                if(newItem){
                    $('#dynamicList').append('<li><input type="checkbox" class="itemCheckbox">' + newItem + '</li>');
                    $('#newItem').val('');
                }
            });
            $('#removeItem').click(function(){
                $('.itemCheckbox:checked').parent().remove();
            });
        });
    </script>
</body>
</html>

在这个示例中，我们首先创建了一个输入框和一个按钮，用于输入新的项目并添加到列表中，我们创建了一个空的无序列表，用于显示动态添加的项目。

当用户点击“添加项目”按钮时，我们从输入框获取新的项目名称，并将其添加到列表中，如果输入框为空，则不会添加任何项目。

当用户点击“删除选中项目”按钮时，我们将删除所有被选中的项目，这是通过查找所有被选中的复选框（.itemCheckbox:checked），然后删除它们的父元素（即列表项）来实现的。

这个示例只是一个基本的实现，你可以根据需要进行修改和扩展，例如添加更多的功能，如编辑项目，排序项目等。