如何实现新增输入值与Delete按钮平行显示？样式问题求助

问题核心在于你当前的DOM结构：用来存放输入文本的是<div>元素，它属于块级元素，默认会独占一行，因此必然会和后续的Delete按钮换行显示。同时你将文本块与按钮作为同级元素直接插入，既没有统一容器导致布局混乱，删除操作还要处理两个独立元素，逻辑冗余且容易出错。

无需额外修改CSS，调整DOM结构就能彻底解决问题：

修改后的代码 #

JavaScript部分

function appendInput() {
  var input = document.getElementById("input").value.trim();
  var div = document.getElementById("div");
  if (input !== '') {
    // 创建统一容器包裹文本与按钮
    var itemContainer = document.createElement("div");
    
    // 用span存储文本（行内元素，不会独占一行）
    var textNode = document.createElement("span");
    textNode.textContent = input;
    
    var deleteButton = document.createElement("button");
    deleteButton.textContent = "Delete";
    deleteButton.addEventListener("click", function() {
      // 直接删除整个容器，无需单独处理内部元素
      div.removeChild(itemContainer);
    });
    
    // 将文本与按钮放入容器
    itemContainer.appendChild(textNode);
    itemContainer.appendChild(deleteButton);
    // 将容器插入目标区域
    div.appendChild(itemContainer);
    
    document.getElementById("input").value = "";
  } else {
    document.getElementById("input").value = "";
  }
}

function Submit() {
  var pi = "";
  var children = document.getElementById("div").children;
  for (var i = 0; i < children.length; i++) {
    // 遍历每个容器，提取内部的文本内容
    var textSpan = children[i].querySelector("span");
    if (textSpan) {
      pi += textSpan.textContent + "\n";
    }
  }
  document.getElementById("dew").innerHTML = pi;
}

HTML部分（无需修改）

<input id="input" type="text" />
<button onclick="appendInput()">Add</button>
<button onclick="Submit()">Submit</button>
<div id="div"></div>
<div id="dew"></div>

关键优化点： #

• 用<span>（行内元素）替代原有的<div>存储文本，避免独占一行
• 为每个条目创建独立容器，确保文本与按钮在同一行显示，同时简化删除逻辑
• 移除了重复生成的id（原代码中Wadiw和bt会重复创建，违反HTML id唯一性规则）

调整后文本与Delete按钮会自然在同一行展示，无需额外CSS，代码逻辑更简洁可靠。

内容的提问来源于stack exchange，提问作者Ricky Suwandi