Как клонировать содержимое div и добавить только один за раз? - PullRequest
Новая
       13

Как клонировать содержимое div и добавить только один за раз?

0 голосов
/ 13 ноября 2018

У меня есть форма, которая должна позволять пользователю нажимать на «Добавить строку» и создавать еще одну идентичную строку.Для этого потребуется new row, чтобы дать возможность пользователю удалить эту строку, если она была создана случайно.Вот мой код, который не работает правильно.После того, как я нажму на добавить строку, второй тайм-код вставит еще 3 строки.Что-то странное происходит с тем, как я вставляю и клонирую новые строки. 

$("#add_row").on('click', addRow);
function addRow() {
    $(".data-bug-item").clone().insertAfter(".data-bug-item");
};
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script language="javascript" type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script language="javascript" type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div id="dataBug" class="bug-section">
  <div class="row">
    <div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <button type="button" class="btn" name="add_row" id="add_row">
                                                        <span class="glyphicon glyphicon-plus-sign"></span> Add Row
                                                    </button>
    </div>
  </div>
  <div class="form-group required data-bug-item">
    <label class="control-label" for="type"><span class="label label-default">Column & Description:</span></label>
    <div class="row">
      <div class="col-xs-3 col-sm-3 col-md-2 col-lg-2">
        <select class="form-control" name="frm_column" id="frm_column" required>
          <option value="">--Choose--</option>
          <option value="1">Location</option>
          <option value="2">Name</option>
          <option value="3">Year</option>
          <option value="4">City</option>
        </select>
      </div>
      <div class="col-xs-9 col-sm-9 col-md-10 col-lg-10">
        <input class="form-control" type="text" name="frm_descr" id="frm_descr" placeholder="Enter Description" required>
      </div>
    </div>
  </div>
</div>

Я бы хотел видеть только одну строку за раз и кнопку в конце поля ввода Описание для удаления.

1 Ответ

0 голосов
/ 13 ноября 2018

Самый простой способ сделать это, это клонировать незначительную часть html.

Вы клонируете все, включая клонированную часть.

После data-bug-item создайте div с таким жеимя просто для идентификации и клонирования просто форма и не вся информация внутри div.

Пример: 

$("#add_row").on('click', addRow);
function addRow() {
    $("#form-data-bug-item").clone().insertAfter(".data-bug-item");
};
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script language="javascript" type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script language="javascript" type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div id="dataBug" class="bug-section">
  <div class="row">
	<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
	  <button type="button" class="btn" name="add_row" id="add_row">
														<span class="glyphicon glyphicon-plus-sign"></span> Add Row
													</button>
	</div>
  </div>
  <div class="form-group required data-bug-item">
  <div id="form-data-bug-item">
		<label class="control-label" for="type"><span class="label label-default">Column & Description:</span></label>
		<div class="row">
		  <div class="col-xs-3 col-sm-3 col-md-2 col-lg-2">
			<select class="form-control" name="frm_column" id="frm_column" required>
			  <option value="">--Choose--</option>
			  <option value="1">Location</option>
			  <option value="2">Name</option>
			  <option value="3">Year</option>
			  <option value="4">City</option>
			</select>
		  </div>
		  <div class="col-xs-9 col-sm-9 col-md-10 col-lg-10">
			<input class="form-control" type="text" name="frm_descr" id="frm_descr" placeholder="Enter Description" required>
		  </div>
		</div>
	</div>
  </div>
</div>

Теперь вам просто нужно клонировать form-data-bug-item

PS: я не рассматриваю другие вещи в вашем коде,просто решение.

...