jQuery动态添加删除功能-CFANZ编程社区

预览

jQuery动态添加删除功能_jquery
源码

<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
    $(function () {
        //增加联系方式按钮事件
        $("#btn_add").click(function () {
            var div2 = $("<div>");
            div2.append($("<label>电话</label>"));
            div2.append($("<input type='text' />"));
            //增加一个行内删除按钮
            var btn_divdel = $(" <input type='button' value='删除' />");

            //行内删除按钮事件
            btn_divdel.click(function () {
                $(this).parent().remove();
            })

            div2.append(btn_divdel);
            $("#div1").append(div2);

        })

        //外部删除按钮事件
        $("#btn_del").click(function () {
            $("#div1").children().remove();
        })

        //外部清空按钮事件
        $("#btn_clean").click(function () {
            $("#div1").empty();
        })

    })
</script>
</head>

<body>

<input type="button" value="删除" id="btn_del">
<input type="button" value="清空" id="btn_clean">
<input type="button" value="增加联系方式" id="btn_add">

<div style="width: 400px;height: 400px;background-color: aqua" id="div1">

</div>

</body>

</html>