Question

如何在单击 + 按钮时添加行。并在点击 - 按钮时删除行下面是代码。

请在 javascript 中帮助我提供指导方针，甚至是一段代码，我可以用它来添加和删除使用 buttons 的行。

不胜感激。

    <body>
      <div class="container">
        <form method="POST">
           <div class="form-row">
              <div class="col">
                    Dish Name<input type="text" class="form-control" id="dish_name">
              </div>
              <div class="col">
                    Price<input type="text" class="form-control" id="price">
              </div>
            </div>
            <div class="form-row">
                <div class="col">
                    Description<input type="text" class="form-control" id="description">
                </div>
            </div>


            <div class="form-row" id="container">
                <div class="col-md-3">
                    Name<input type="text" class="form-control" id="name">
                </div>

                <div class="col-md-3">
                    Unit<input type="text" class="form-control" id="description">
                </div>

                <div class="col-md-3">
                    Price<input type="text" class="form-control" id="price1">
                </div>

                <div class="col-md-3">
                    <button type="button" id="add-row"><span>+</span></button>
                    
                </div>
            </div>  

            <div class="form-row" id="container1">
            </div>      
        </form>
    </div>

    <script type="text/javascript">
        
        $(document).ready(function(){
            var data = '<div class="col-md-3">'
                    + 'Name<input type="text" class="form-control" id="name">'
                    + '</div>'

                    + '<div class="col-md-3">'
                    + 'Unit<input type="text" class="form-control" id="description">'
                    + '</div>'

                    + '<div class="col-md-3">'
                    + 'Price<input type="text" class="form-control" id="price1">'
                    + '</div>'

                    + '<div class="col-md-3">'
                    + '<button type="button" id="delete-row"><span>-</span></button>'
                    
                    + '</div>'
                    + '</div>'
            $('#add-row').click(function(){
                $('#container1').append(data);
            });
        });

      </script>
    </body>

Answer 1

首先用具有特定类的容器包装您的数据 html，例如 <div class="input-wrapper row"> ...</div> 然后您应该将删除 btn id 替换为 class 属性，（重复 id 的语义错误），

同样为了不破坏布局，将container1类from-row替换为form-group

<div class="form-group" id="container1">
   ...
</div>

最后只需在“删除行”按钮上添加事件委托即可删除包装的 div 输入：

$('#container1').on("click", ".delete-row", function() {
    $(this).parents(".input-wrapper").remove();
});

见下面的工作片段：

$(document).ready(function() {
  var data = '<div class="input-wrapper row"><div class="col-md-3">' +
    'Name<input type="text" class="form-control" id="name">' +
    '</div>'

    +
    '<div class="col-md-3">' +
    'Unit<input type="text" class="form-control" id="description">' +
    '</div>'

    +
    '<div class="col-md-3">' +
    'Price<input type="text" class="form-control" id="price1">' +
    '</div>'

    +
    '<div class="col-md-3">' +
    '<button type="button" class="delete-row"><span>-</span></button>'

    +
    '</div>' +
    '</div>' +
    '</div>'
  $('#add-row').click(function() {
    $('#container1').append(data);
  });
  
  $('#container1').on("click", ".delete-row", function() {
    $(this).parents(".input-wrapper").remove();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <form method="POST">
    <div class="form-row">
      <div class="col">
        Dish Name<input type="text" class="form-control" id="dish_name">
      </div>
      <div class="col">
        Price<input type="text" class="form-control" id="price">
      </div>
    </div>
    <div class="form-row">
      <div class="col">
        Description<input type="text" class="form-control" id="description">
      </div>
    </div>


    <div class="form-row" id="container">
      <div class="col-md-3">
        Name<input type="text" class="form-control" id="name">
      </div>

      <div class="col-md-3">
        Unit<input type="text" class="form-control" id="description">
      </div>

      <div class="col-md-3">
        Price<input type="text" class="form-control" id="price1">
      </div>

      <div class="col-md-3">
        <button type="button" id="add-row"><span>+</span></button>

      </div>
    </div>

    <div class="form-group" id="container1">
    </div>
  </form>
</div>

如何使用 jquery 添加和删除带有按钮的行？

1 个答案: