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

【问题标题】：How to add and remove rows with buttons using jquery?如何使用 jquery 添加和删除带有按钮的行？
【发布时间】：2021-01-30 09:13:06
【问题描述】：

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

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

【问题讨论】：

标签： javascript html jquery twitter-bootstrap

【解决方案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();
});

请参阅下面的工作 sn-p ：

$(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>

【讨论】：

包装器会破坏响应式列布局。向现有标记添加一个新类可能更好
@charlietfl ，你是对的，表单行已经代表一个 row div ，因此 break (-15 padding) ，所以替换为 form-group 并添加一个 row div将解决问题，
如何使用 jquery ajax 以表格形式显示数据，例如菜名、价格和多种菜肴成分（名称、单位、价格）？
@AkashChevli，欢迎，首先如果上述答案帮助您接受它，并且对于您的新需求，您必须提出其他问题，因为它与这个问题无关