时间戳

首页 > 解决方案 > 如何使用 jquery 添加和删除带有按钮的行？

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

问题描述

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

请帮助我提供指导方针，甚至是一段代码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>

标签： javascripthtmljquerytwitter-bootstrap

解决方案

首先用具有特定类的容器包装您的数据 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>

推荐阅读