如何添加带有内容的新行以形成答案

【问题标题】：how add new line with content to form如何添加带有内容的新行以形成
【发布时间】：2021-01-09 16:36:23
【问题描述】：

我的职位很短，职位很少。我想添加一个功能，当某个身体单击按钮时，该功能将允许在表单中添加下一个项目。我解决了通过 jquery 添加带有内容（按钮、输入和下拉列表选择在一行中）的新 div 的问题，但是我对新 div 的位置和该 div 中的内容有问题（不在线上）。下一个问题是删除新的 div。现在我有这样的东西。

<html>
<body>
<div class="card-body lista-przyborow-test">
  <form method="POST" action="test.php" accept-charset="UTF-8" onsubmit="return confirm(&#039;sure?&#039;);" id="testt"><input name="_token" type="hidden" value="fv9Xo9B0TIaDGlXmwGpzeE60e8VUDYIlKdXiOkx2">
   
    <div class="form-group row">
      <label for="rachunek" class="col-md-4 col-form-label text-md-right">Number:</label>
      <div class="col-md-6">
        <input id="rachunek" type="text" class="form-control form-control-sm  " name="rachunek" value="">
      </div>
    </div>

    <div class="form-group row">
      <label for="data" class="col-md-4 col-form-label text-md-right">Data zakupu:</label>
      <div class="col-md-6">
        <input id="data" type="text" class="form-control form-control-sm  " name="data" value="">
      </div>     
    </div>
    
    <div class="form-group row" id="listap">
      <label for="status" class="col-md-4 col-form-label text-md-right">Equipemnt:</label>
      <div class="col-md-6">
        <div class="form-check form-check-inline">
          <select name="artbiur" id="artbiur" class="form-control form-control-sm ">
            <option value="">Take equip</option>
            <option value="1">
              PAPER A4
            </option>
            <option value="2">
              PAPER A3
            </option>
            <option value="3">
              PEN
            </option>
            <option value="4">
              PENCIL
            </option>
          </select>
        </div>
        <div class="form-check form-check-inline">
          <label class="form-check-label" for="inlineRadio2">How many</label>
          <div class="form-check form-check-inline">
          </div>
          <input id="ile" type="text" class="form-control form-control-sm " name="ile" />
        </div>
      </div>
    </div>

    <div class="form-group row">
    <label for="ile" class="col-md-4 col-form-label text-md-right"></label>
      <div class="col-md-6">
        <button type="button" id="dodaj-pozyc" class="btn btn-outline-warning btn-sm">ADD NEXT POSITION</button>
      </div>
    </div>
    
    <div class="form-group row mb-0">
      <div class="col-md-6 offset-md-4">
        <button type="submit" class="btn btn-primary btn-sm">
          SAVE
        </button>     
      </div>
    </div>
    
  </form>
</div>

<script>
$(document).ready(function() {
  var i = 1;
  $('#dodaj-pozyc').click(function() { 
    $('#listap').append(
      '<button type="button" style="width:70px" name="remove' + i + '" id="' + i + '" class="col-sm-4 col-form-label text-sm-center btn btn-outline-danger btn-sm btn_remove font-weight-bold">X</button>' +
      '<div class="col-md-6" id="lista-p-"' + i + '">' +
      '<div class="form-check form-check-inline">' +
      '<select name="artbiur" id="atrybut-nazwa-' + i + '" class="form-control form-control-sm ">' +
      '<option value="">Wybierz artykuł</option>' +

      ' <option value="1">' +
      'abcd' +
      '</option>' +

      '</select>' +
      '</div>' +
      '<div class="form-check form-check-inline">' +
      '<label class="form-check-label" for="inlineRadio2">Ilość:</label>' +
      '<div class="form-check form-check-inline">' +
      '<div class="form-check form-check-inline">' +
      '</div>' +
      '<input id="atrybut-ile-' + i + '" type="text" class="form-control form-control-sm " name="ile" />' +
      '</div>' +
      '</div>');
    i++;
  });
  $(document).on('click', '.btn_remove', function() {
    var id = $(this).attr("id");
    $('input[name="remove"]' + id).remove();
    $('#atrybut-ile-' + id + '').remove();
    $('#atrybut-nazwa-' + id+  '').remove();
    $('#lista-p-' + id).empty();
    $('#lista-p-' + id).html("");
  });
});
</script>
</body>
</html>

【问题讨论】：

标签： html jquery bootstrap-4

【解决方案1】：

按照 Louys 的建议（谢谢！）添加了引导样式，现在所有内容都按要求放在一行上。我在原始行中添加了一个禁用按钮，只是为了让它看起来更整洁（这不是必需的，而是一种偏好）。

删除按钮现在通过使用 .closest 向上移动 DOM 树来工作，直到找到具有包装类 .equipment-entry 的新 div 并删除整个 div 及其所有子级。

您应该能够根据自己的需要进行调整。

var i = 1;

// Click event for remove button
$(document).on("click", ".btn_remove", function() {

  // Move up DOM tree to nearest .wrapper and remove it all
  $(this).closest(".equipment-entry").remove();

});


// Original add code
// Added a wrapper div to make it easier to remove
$('#dodaj-pozyc').click(function() {
  $('#listap').append(
  
  // Added wrapper class .equipment-entry
       '<div class="col-md-6 equipment-entry">' +
        '<button type="button" style="width:70px" name="remove' + i + '" id="' + i + '" class="col-sm-4 col-form-label text-sm-center btn btn-outline-danger btn-sm btn_remove font-weight-bold">X</button>' +
          '<div class="form-check form-check-inline">' +
            '<select name="artbiur" id="artbiur" class="form-control form-control-sm ">' +
              '<option value="">Take equip</option>' +
              '<option value="1">' +
                'abcd' +
              '</option>' +
            '</select>' +
          '</div>' +
         '<div class="form-check form-check-inline">' +
            '<label class="form-check-label" for="inlineRadio2">How many</label>' +
            '<div class="form-check form-check-inline">' +
            '</div>' +
            '<input id="ile" type="text" class="form-control form-control-sm " name="ile" />' +
          '</div>' +
        '</div>');

  // Increase index
  i++;

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

<html>

<body>
  <div class="card-body lista-przyborow-test">
    <form method="POST" action="test.php" accept-charset="UTF-8" onsubmit="return confirm(&#039;sure?&#039;);" id="testt"><input name="_token" type="hidden" value="fv9Xo9B0TIaDGlXmwGpzeE60e8VUDYIlKdXiOkx2">

      <div class="form-group row">
        <label for="rachunek" class="col-md-4 col-form-label text-md-right">Number:</label>
        <div class="col-md-6">
          <input id="rachunek" type="text" class="form-control form-control-sm  " name="rachunek" value="">
        </div>
      </div>

      <div class="form-group row">
        <label for="data" class="col-md-4 col-form-label text-md-right">Data zakupu:</label>
        <div class="col-md-6">
          <input id="data" type="text" class="form-control form-control-sm  " name="data" value="">
        </div>
      </div>

      <div class="form-group row" id="listap">
        <label for="status" class="col-md-4 col-form-label text-md-right">Equipment:</label>
        <div class="col-md-6">
        
           <button type="button" style="width:70px" name="remove' + i + '" id="' + i + '"  disabled="disabled" class="col-sm-4 col-form-label text-sm-center btn btn-outline-danger btn-sm btn_remove font-weight-bold">X</button>

          <div class="form-check form-check-inline">
            <select name="artbiur" id="artbiur" class="form-control form-control-sm ">
              <option value="">Take equip</option>
              <option value="1">
                PAPER A4
              </option>
              <option value="2">
                PAPER A3
              </option>
              <option value="3">
                PEN
              </option>
              <option value="4">
                PENCIL
              </option>
            </select>
          </div>
          <div class="form-check form-check-inline">
            <label class="form-check-label" for="inlineRadio2">How many</label>
            <div class="form-check form-check-inline">
            </div>
            <input id="ile" type="text" class="form-control form-control-sm " name="ile" />
          </div>
        </div>
        
 
      </div>

      <div class="form-group row">
        <label for="ile" class="col-md-4 col-form-label text-md-right"></label>
        <div class="col-md-6">
          <button type="button" id="dodaj-pozyc" class="btn btn-outline-warning btn-sm">ADD NEXT POSITION</button>
        </div>
      </div>

      <div class="form-group row mb-0">
        <div class="col-md-6 offset-md-4">
          <button type="submit" class="btn btn-primary btn-sm">
          SAVE
        </button>
        </div>
      </div>

    </form>
  </div>

</body>

</html>

【讨论】：

CSS可能只是bootstrap。 ;)
抱歉我的疏忽。 CSS 只是引导
哈！谢谢你，路易。更新了引导样式。
是否可以从 div "equipment-entry" 中取出 "btn-remove" 并在它之前添加广告？知道它在一行中添加两个div“设备条目”。