Add New Field on Click with Remove Button – HTML, CSS & JavaScript Tutorial

Dynamic form fields are a common requirement in modern web applications. Whether you’re building a contact form, survey, or user profile editor, the ability to add new input fields on click and remove them when needed improves flexibility and user experience.

In this tutorial, we’ll walk through how to create a dynamic form using HTML, CSS, and JavaScript. We’ll use Bootstrap for styling and keep the logic clean and reusable. The final result will allow users to add multiple rows of input fields and remove them individually.

🔧 What You’ll Build

• A form layout with First Name and Last Name input fields
• An “Add More” button to append new rows
• A “Remove” button to delete individual rows
• Responsive styling using Bootstrap
• Reusable JavaScript logic for dynamic field management

📄 HTML Structure

We start by creating the base form layout. The first row is static, and additional rows will be added dynamically.

<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="code-container">
  <div class="form-section">
    <div class="form-row mb-3">
      <div class="row align-items-center">
        <div class="col-5">
          <input type="text" placeholder="First Name" name="first_name[]" class="form-control">
        </div>
        <div class="col-5">
          <input type="text" placeholder="Last Name" name="last_name[]" class="form-control">
        </div>
      </div>
    </div>
  </div>
  <div class="text-end mt-4">
    <button type="button" class="btn btn-primary btn-sm add-more">Add More +</button>
  </div>
</div>
  

The form uses Bootstrap’s grid system for alignment. Each row contains two input fields and optionally a remove button.

🎨 CSS Styling

We use minimal custom CSS to style the container and inputs. Bootstrap handles most of the layout and responsiveness.

body {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  margin: 15px;
}
.form-control {
  font-size: 14px;
}
.code-container {
  width: 450px;
  max-width: 100%;
  padding: 10px;
  box-shadow: 0px 0px 10px #0000000d;
  border-radius: 10px;
}
  

⚙️ JavaScript Logic

Now we add the interactivity. The script handles adding new rows and removing them when the “x” button is clicked.

// Stored Row Template
let newRow = 'x';

// Add New Row
var addBtn = document.querySelector(".add-more");
addBtn.addEventListener("click", function() {
  document.querySelector(".form-section").insertAdjacentHTML("beforeend", newRow);
});

// Remove Row
const removeRow = (event) => {
  event.target.parentNode.parentNode.remove();
}
  

📚 How It Works

• newRow: A string containing the HTML for a new input row
• addBtn: Selects the “Add More” button
• insertAdjacentHTML: Adds the new row to the form section
• removeRow: Deletes the row when the “x” button is clicked

🧩 Use Cases

• Multi-user registration forms
• Survey forms with dynamic questions
• Invoice or billing forms with item rows
• Custom profile editors
• Team member input sections

📱 Responsive Design Tips

• Use Bootstrap’s grid system for mobile-friendly layout
• Ensure buttons are large enough for touch devices
• Stack inputs vertically on smaller screens

🛠️ Enhancement Ideas

• Add validation to prevent empty fields
• Limit the number of rows added
• Allow drag-and-drop reordering
• Save data to localStorage or send via AJAX
• Include icons for better UX

🔗 Live Demo

Check out the working example at code.bydev24.com/snippets/add-new-field