js添加删除标签功能

在JavaScript中实现添加和删除标签的功能，通常涉及到DOM操作和事件处理。以下是一个简单的示例，展示了如何实现这一功能：

基础概念

DOM操作：Document Object Model（文档对象模型），允许JavaScript与HTML文档进行交互。
事件处理：通过监听用户的操作（如点击），执行相应的函数。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tag Manager</title>
    <style>
        .tag {
            display: inline-block;
            padding: 5px 10px;
            margin: 5px;
            background-color: #f0f0f0;
            border-radius: 5px;
        }
        .remove-tag {
            cursor: pointer;
            margin-left: 5px;
            color: red;
        }
    </style>
</head>
<body>
    <div id="tags-container"></div>
    <input type="text" id="tag-input" placeholder="Enter tag">
    <button id="add-tag-btn">Add Tag</button>

    <script>
        const tagsContainer = document.getElementById('tags-container');
        const tagInput = document.getElementById('tag-input');
        const addTagBtn = document.getElementById('add-tag-btn');

        addTagBtn.addEventListener('click', () => {
            const tagText = tagInput.value.trim();
            if (tagText) {
                addTag(tagText);
                tagInput.value = '';
            }
        });

        function addTag(text) {
            const tagElement = document.createElement('div');
            tagElement.className = 'tag';
            tagElement.textContent = text;

            const removeButton = document.createElement('span');
            removeButton.className = 'remove-tag';
            removeButton.textContent = 'x';
            removeButton.addEventListener('click', () => {
                tagsContainer.removeChild(tagElement);
            });

            tagElement.appendChild(removeButton);
            tagsContainer.appendChild(tagElement);
        }
    </script>
</body>
</html>