正文

轻松掌握：JavaScript轻松实现添加与删除联系人的实用技巧

/0 浏览量
1019

在数字化时代，管理联系人信息变得越来越重要。JavaScript作为一种强大的前端脚本语言，可以轻松实现添加与删除联系人的功能。本文将详细介绍如何使用JavaScript以及HTML和CSS，构建一个简单的联系人管理系统。

一、项目准备

在开始之前，我们需要准备以下工具：

  • HTML：用于构建用户界面。
  • CSS：用于美化界面。
  • JavaScript：用于实现添加与删除联系人的功能。

二、创建HTML结构

首先，我们需要创建一个简单的HTML结构来展示联系人列表。以下是一个基础的HTML模板：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>联系人管理系统</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>我的联系人</h1>
    <div id="contact-form">
        <input type="text" id="name" placeholder="姓名">
        <input type="text" id="phone" placeholder="电话">
        <button onclick="addContact()">添加联系人</button>
    </div>
    <ul id="contact-list">
        <!-- 联系人列表将在这里动态生成 -->
    </ul>
    <script src="script.js"></script>
</body>
</html>

三、编写CSS样式

为了使联系人列表更加美观，我们可以添加一些CSS样式。以下是一个简单的CSS样式文件styles.css：

body {
    font-family: Arial, sans-serif;
}

#contact-form {
    margin-bottom: 20px;
}

#contact-form input {
    margin-right: 10px;
    padding: 8px;
    width: 200px;
}

#contact-list {
    list-style-type: none;
}

#contact-list li {
    background-color: #f2f2f2;
    margin-bottom: 10px;
    padding: 10px;
}

#contact-list li button {
    float: right;
    padding: 5px 10px;
}

四、JavaScript实现功能

接下来，我们需要使用JavaScript来实现添加和删除联系人的功能。以下是一个简单的JavaScript文件script.js：

// 获取DOM元素
const contactList = document.getElementById('contact-list');

// 添加联系人
function addContact() {
    const name = document.getElementById('name').value;
    const phone = document.getElementById('phone').value;

    // 创建新的联系人列表项
    const li = document.createElement('li');
    li.innerHTML = `${name} - ${phone} <button onclick="removeContact(this)">删除</button>`;

    // 添加到联系人列表
    contactList.appendChild(li);

    // 清空输入框
    document.getElementById('name').value = '';
    document.getElementById('phone').value = '';
}

// 删除联系人
function removeContact(element) {
    // 删除当前按钮所在的列表项
    element.parentElement.remove();
}

五、总结

通过以上步骤，我们成功创建了一个简单的联系人管理系统。用户可以添加新的联系人，并且可以随时删除不需要的联系人。这个系统可以根据实际需求进行扩展，例如添加更多字段、实现搜索功能等。

希望这篇文章能帮助你轻松掌握使用JavaScript实现添加与删除联系人的实用技巧。如果你有任何疑问或建议，请随时留言。

-- 展开阅读全文 --