动态生成的删除按钮应删除其p标记

基础概念

在前端开发中，动态生成的元素通常是通过JavaScript在运行时创建的。这些元素可以是按钮、链接、表单等，它们可以根据用户的操作或其他事件动态地添加到页面上。在这个问题中，我们关注的是一个动态生成的删除按钮，它的功能是删除其父级<p>标记。

类型

基于JavaScript的DOM操作：使用原生JavaScript或库（如jQuery）来动态创建和删除元素。
基于框架的操作：使用现代前端框架（如React、Vue、Angular）来管理组件的生命周期和状态。

应用场景

动态表单：根据用户的选择动态添加或删除表单字段。
动态列表：在列表中添加或删除项目。
交互式界面：提供用户可以直接操作的界面元素。

示例代码

以下是一个使用原生JavaScript实现动态删除按钮的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Delete Button</title>
</head>
<body>
    <p id="paragraph">这是一个段落。</p>
    <button onclick="addDeleteButton()">添加删除按钮</button>

    <script>
        function addDeleteButton() {
            const p = document.getElementById('paragraph');
            const deleteButton = document.createElement('button');
            deleteButton.textContent = '删除';
            deleteButton.onclick = function() {
                p.remove();
            };
            p.appendChild(deleteButton);
        }
    </script>
</body>
</html>