当前位置：首页 > article >正文

JS基础练习|动态创建多个input，并且支持删除功能

article 2024/10/4 1:20:33

效果图
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态生成输入框并保存数据</title>
    <link rel="stylesheet" href="./styles.css">
</head>
<body>
  <button id="addInputBtn">添加输入框</button>
  <div class="main-box">
    <div id="inputContainer"></div>
    <pre id="dataDisplay"></pre>
  </div>
    <script src="./script.js"></script>
</body>
</html>

body {
  font-family: 'Roboto', sans-serif;
  background-color:#0a0a23;
  color:#ffffff
}
.main-box{
  display:flex;
  border:1px solid #ffffff;
  padding:10px;
}
#addInputBtn{
  margin:0 auto;
  display:block;
  width:150px;
  height:30px;
  border-radius:10px;
}
.input-container {
  padding:10px;
  border:1px solid #ffffff;
  width:300px;
  margin: 10px auto;
  border-radius:10px;
}
input,label{
  width:40%;
  display:inline-block;
}
h1,p{
  border-radius:10px;
  border:2px solid #ffffff;
  margin:0 auto 10px;
  padding:10px;
  width:200px;
}
/* 预格式化文本样式 */
pre {
  background-color: #f0f0f0; /* 背景颜色 */
  border: 1px solid #ccc;    /* 边框 */
  border-radius: 5px;        /* 圆角边框 */
  padding: 10px;             /* 内边距 */
  overflow-x: auto;          /* 水平滚动条 */
  white-space: pre-wrap;     /* 自动换行 */
  font-family: monospace;    /* 等宽字体 */
  margin: 10px auto;            /* 外边距 */
  color:#0a0a23
}
.delete-btn{
  margin-left: 10px;
  background-color: #0a0a23;
  color:#ffffff;
}

// 用于保存输入框编号和相应值的数组
const inputData = [];

// 用于保存当前的编号
let inputCounter = 0;

// 获取按钮和输入框容器
const addInputBtn = document.getElementById('addInputBtn');
const inputContainer = document.getElementById('inputContainer');
const dataDisplay = document.getElementById('dataDisplay');

// 给按钮添加点击事件
addInputBtn.addEventListener('click', function() {
    // 增加编号
    inputCounter++;

    // 创建一个新的 div 作为输入框容器
    const newDiv = document.createElement('div');
    newDiv.classList.add('input-container');

    // 创建一个新的 label 标签，显示编号
    const newLabel = document.createElement('label');
    newLabel.textContent = '输入框 ' + inputCounter + ': ';

    // 设置 label 的 for 属性，使其与输入框关联
    newLabel.htmlFor = 'input' + inputCounter;

    // 创建一个新的输入框
    const newInput = document.createElement('input');
    newInput.type = 'text';
    newInput.name = 'input' + inputCounter; // 设置唯一 name 属性
    newInput.id = 'input' + inputCounter;   // 设置唯一 id 属性

    // 创建一个删除按钮
    const deleteBtn = document.createElement('button');
    deleteBtn.textContent = 'x';
    deleteBtn.classList.add('delete-btn');

    // 将 label 和 input、删除按钮 添加到 div 中
    newDiv.appendChild(newLabel);
    newDiv.appendChild(newInput);
    newDiv.appendChild(deleteBtn);
    // 将新的 div 添加到 inputContainer 中
    inputContainer.appendChild(newDiv);

    // 将该输入框的编号、值和删除标志存入数组
    const currentInputData = { id: inputCounter, value: '', deleted: false };
    inputData.push(currentInputData);

    // 监听每个输入框的变化，实时更新数组中的值
    newInput.addEventListener('input', function(event) {
        currentInputData.value = event.target.value; // 更新对应的输入框值
        displayData(); // 每次输入变化时更新显示
    });

    // 监听删除按钮的点击事件
    deleteBtn.addEventListener('click', function() {
        // 将对应输入框的删除标志设置为 true
        currentInputData.deleted = true; // 标记为已删除

        // 清空新创建的 div
        inputContainer.removeChild(newDiv);

        // 更新显示的数据
        displayData();
    });

    displayData(); // 初次创建时更新显示
});

// 显示当前的数组数据
function displayData() {
    // 过滤掉已删除的输入框
    const filteredData = inputData.filter(item => !item.deleted);
    dataDisplay.textContent = JSON.stringify(filteredData, null, 2);
}