Got it, let's fix this up neatly! The main pain points here are the messy HTML string concatenation and getting the Bootstrap Input Group layout right for each variable row. Here's a streamlined, maintainable approach:

Step 1: Updated HTML Structure #

First, we'll adjust the HTML to include a hidden template row (for easy cloning) and fix the initial layout to match Bootstrap's grid system:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <!-- For trash icon -->

<div class="top20 content-form">
  <div class="col-sm-12 mb-2">
    <button id="addEnvBtn" class="btn btn-primary">
      <span class="fa fa-plus-circle"></span> Add environment variable
    </button>
  </div>
  <div class="col-sm-12">
    <div id="envVariablesDiv">
      <!-- Initial environment variable row -->
      <div class="row top10">
        <div class="col-sm-5">
          <div class="input-group">
            <span class="input-group-addon">Name</span>
            <input class="form-control env-name" name="envName[]" type="text" placeholder="e.g. name1">
          </div>
        </div>
        <div class="col-sm-5">
          <div class="input-group">
            <span class="input-group-addon">Variable</span>
            <input class="form-control env-var" name="envVar[]" type="text" placeholder="e.g. var1">
          </div>
        </div>
        <div class="col-sm-2">
          <button class="btn btn-danger delete-env-row">
            <span class="fa fa-trash"></span>
          </button>
        </div>
      </div>
    </div>
    <!-- Hidden template for new rows (cloned when adding) -->
    <div id="envRowTemplate" class="row top10" style="display: none;">
      <div class="col-sm-5">
        <div class="input-group">
          <span class="input-group-addon">Name</span>
          <input class="form-control env-name" name="envName[]" type="text" placeholder="e.g. name1">
        </div>
      </div>
      <div class="col-sm-5">
        <div class="input-group">
          <span class="input-group-addon">Variable</span>
          <input class="form-control env-var" name="envVar[]" type="text" placeholder="e.g. var1">
        </div>
      </div>
      <div class="col-sm-2">
        <button class="btn btn-danger delete-env-row">
          <span class="fa fa-trash"></span>
        </button>
      </div>
    </div>
  </div>
</div>

Step 2: Simplified JavaScript #

Instead of concatenating long HTML strings, we'll clone the hidden template row. We'll also use event delegation to handle delete buttons for dynamically added rows:

$(document).ready(function() {
  // Add new environment variable row
  $('#addEnvBtn').click(function() {
    // Clone the template, remove its ID, and append it to the container
    const newRow = $('#envRowTemplate').clone().removeAttr('id').show();
    $('#envVariablesDiv').append(newRow);
  });

  // Delete row (works for both initial and dynamic rows via event delegation)
  $('#envVariablesDiv').on('click', '.delete-env-row', function() {
    // Remove the entire row container
    $(this).closest('.row').remove();
  });
});

Key Improvements: #

• Cleaner Code: Using a hidden template eliminates messy string concatenation, making the code easier to read and modify.
• Valid Bootstrap Layout: Each row uses Bootstrap's row and col-* classes to align inputs and the delete button properly, with correct Input Group styling.
• Form-Friendly Names: Using name="envName[]" and name="envVar[]" ensures all inputs are submitted as arrays, which simplifies backend processing.
• Event Delegation: The delete event is bound to the parent container, so it works for both initial and dynamically added rows.
• Fixed ID Issues: Removed duplicate invalid IDs and used classes instead for targeting elements.

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