页面加载时，只有一行输入框和右边一个新增按钮，没有任何删除按钮。 点击新增按钮时，在最后一行输入框的上面新增一行，并显示所有删除按钮，但除了第一行 点击某一行删除按钮时，删除该行，并根据当前行数（除了新增按钮外）决定是否隐藏其他删除按钮。如果只剩一行，则隐藏所有删除按钮，

你的问题是关于一个页面的交互设计，需要实现以下功能：

1. 页面加载时只有一个输入框和一个新增按钮；
2. 点击新增按钮时，在最后一行输入框的上方新增一行，并显示所有删除按钮；
3. 除了第一行，点击删除按钮时，删除该行，并根据当前行数（除了新增按钮外）决定是否隐藏其他删除按钮；
4. 如果只剩一行，则隐藏所有删除按钮。

这个功能可以通过以下步骤实现：

1. 在页面加载时，只显示一个输入框和一个新增按钮。
2. 当用户点击新增按钮时，使用 JavaScript 动态创建一个新的输入框行，并在该行的上方显示所有删除按钮。同时，将新增按钮移动到新的输入框行的底部。
3. 当用户点击某一行的删除按钮时，使用 JavaScript 删除该行，并根据当前行数（除了新增按钮外）来判断是否需要隐藏其他删除按钮。如果只剩下一行，则隐藏所有删除按钮。

需要注意的是，这个交互设计需要考虑到用户体验和页面性能。在实现时，可以使用现有的前端框架或库来简化开发过程，例如 jQuery 或 React 等。

相关问题

移动端 点击新增 动态新增一行输入框 带删除按钮

可以通过以下步骤实现这个功能：

1. 在HTML中创建一个表单，并为其添加一个按钮。当用户点击该按钮时，将动态添加新的表单行。

<form>
  <div id="form-rows">
    <div class="form-row">
      <input type="text" name="input[]" placeholder="Enter some text">
      <button type="button" class="remove-row">Remove</button>
    </div>
  </div>
  <button type="button" id="add-row">Add New Row</button>
</form>

2. 在JavaScript中，为“添加新行”按钮添加一个事件监听器。当用户点击该按钮时，将调用一个函数来动态创建新的表单行并将其添加到表单中。

const formRows = document.getElementById('form-rows');
const addRowBtn = document.getElementById('add-row');

addRowBtn.addEventListener('click', function(event) {
  const newRow = document.createElement('div');
  newRow.classList.add('form-row');
  newRow.innerHTML = `
    <input type="text" name="input[]" placeholder="Enter some text">
    <button type="button" class="remove-row">Remove</button>
  `;
  formRows.appendChild(newRow);
});

3. 为新创建的表单行中的“删除”按钮添加事件监听器。当用户点击该按钮时，将从表单中删除相应的表单行。

formRows.addEventListener('click', function(event) {
  if (event.target.classList.contains('remove-row')) {
    const row = event.target.closest('.form-row');
    row.parentNode.removeChild(row);
  }
});

这样，当用户在移动设备上点击“添加新行”按钮时，将动态添加一行包含输入框和删除按钮的表单行，并且用户可以通过点击相应行的“删除”按钮来删除该行。

写代码，页面加载时只有一个输入框和一个新增按钮； 点击新增按钮时，在最后一行输入框的上方新增一行，并显示所有删除按钮； 除了第一行，点击删除按钮时，删除该行，并根据当前行数（除了新增按钮外）决定是否隐藏其他删除按钮； 如果只剩一行，则隐藏所有删除按钮。

好的，以下是一个简单的实现，使用了 jQuery 来简化操作：

HTML：

<div id="input-wrapper">
  <div class="input-row">
    <input type="text" class="input-box">
    <button class="delete-btn hidden">删除</button>
  </div>
  <button id="add-btn">新增</button>
</div>

CSS：

.hidden {
  display: none;
}

JavaScript：

$(document).ready(function() {
  // 初始化
  $(".delete-btn").addClass("hidden");

  // 新增按钮点击事件
  $("#add-btn").click(function() {
    // 在最后一行输入框的上方新增一行
    var newRow = $("<div class='input-row'><input type='text' class='input-box'><button class='delete-btn'>删除</button></div>");
    $(".input-row:last").before(newRow);

    // 显示所有删除按钮
    $(".delete-btn").removeClass("hidden");

    // 如果只剩一行，隐藏所有删除按钮
    if ($(".input-row").length == 2) {
      $(".delete-btn").addClass("hidden");
    }
  });

  // 删除按钮点击事件
  $(document).on("click", ".delete-btn", function() {
    // 删除该行
    $(this).parent().remove();

    // 根据当前行数（除了新增按钮外）决定是否隐藏其他删除按钮
    if ($(".input-row").length == 2) {
      $(".delete-btn").addClass("hidden");
    }
  });
});

在页面加载时，只有一个输入框和一个新增按钮，点击新增按钮时，会在最后一行输入框的上方新增一行，并显示所有删除按钮，除了第一行，点击删除按钮时，会删除该行，并根据当前行数（除了新增按钮外）决定是否隐藏其他删除按钮，如果只剩一行，则隐藏所有删除按钮。