Как правильно разрабатывать формы в личном кабинете?

Question

Подскажите как правильно разрабатывать вот такие интерактивные элементы для личного кабинета

По умолчанию у нас одна строка с полями.
При нажатии на кнопку "Добавить цену" добавляется новая строка с такими же полями.
При нажатие на кнопку "Удалить цену" удаляет строку, но не первую, если первая, то удаляет все введенные значения.

Неужели нужно в JS создать всю структуру с классами и тогда вести манипуляцию с DOM деревом?

Прошу любой информацией поделиться , ссылки, комментарии, идеи, или ваш личный опыт.

  let clone0 = $('.row').clone();

  $('.add').on('click', function () {
    $(clone0).appendTo('.list');
  });

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container-fluid">
  <label class="form-label">Установите сумму и валюту для оплаты действия</label>

  <div class="list">
    <div class="row">
      <div class="form-group col-3">
        <input type="text" class="form-control" placeholder="1 000 ₽">
      </div>

      <div class="form-group col-3">
        <select class="form-control">
          <option>Российский рубль</option>
          <option>Доллар США</option>
          <option>ЕВРО</option>
          <option>Йена</option>
          <option>Юань</option>
          <option>Фунт Стерлинга</option>
        </select>
      </div>

      <div class="form-group col-3">
        <select class="form-control">
          <option>Стандартный билет</option>
          <option>Льготный</option>
        </select>
      </div>

      <div class="delete col-3"><button class="btn btn-secondary">Удалить цену</button></div>
    </div>
  </div>

  <div class="add btn btn-primary">Добавить адрес</div>
</div>

Answer 1

let row = $('.row');

$(row).find('.delete').on('click', () => console.log('bar'));

$('.add').on('click', function() {
  let clone = row.clone();
  $(clone).find('.delete').on('click', () => console.log('foo'));
  $(clone).appendTo('.list');
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container-fluid">
  <label class="form-label">Установите сумму и валюту для оплаты действия</label>

  <div class="list">
    <div class="row">
      <div class="form-group col-3">
        <input type="text" class="form-control" placeholder="1 000 ₽">
      </div>

      <div class="form-group col-3">
        <select class="form-control">
          <option>Российский рубль</option>
          <option>Доллар США</option>
          <option>ЕВРО</option>
          <option>Йена</option>
          <option>Юань</option>
          <option>Фунт Стерлинга</option>
        </select>
      </div>

      <div class="form-group col-3">
        <select class="form-control">
          <option>Стандартный билет</option>
          <option>Льготный</option>
        </select>
      </div>

      <div class="delete col-3"><button class="btn btn-secondary">Удалить цену</button></div>
    </div>
  </div>

  <div class="add btn btn-primary">Добавить адрес</div>
</div>

БЛОГ НА HUSL

Как правильно разрабатывать формы в личном кабинете?

Ответы (1 шт):