在这种特定情况下，如何使用 javascript 删除 HTML 元素

Question

我有这个脚本，它有两个任务：

1. 添加/删除动态输入框元素，我们称之为“input_box_a”。

2. 在输入框中添加/删除一个值，我们称之为“input_box_b”

所以假设有一个空的输入框，每当我点击添加它添加 1，当我点击删除它删除 1。

现在，执行任务一，即添加/删除输入框，还会向“input_box_b”添加和删除值。

我的问题是，假设我单击任务上的添加按钮两次三次，它会在“input_box_b”上放置 3 个值，当我使用任务一添加三个输入框时，它会再添加 3 个附加值，现在总数是6、如果我点击任务上的删除按钮两三次，它会减去3个值。

我想要的是当我第四次单击任务二上的删除按钮时，我还想删除以前使用任务一添加的输入框。

这是我对此代码的参考，这基本上就是它的作用， 如何计算动态添加的输入？

https://plnkr.co/edit/jVi4AZBbWNE0qOzZIB8R?p=preview&preview

这是脚本：

$(document).ready(function(e) {

  var $input = $("#b_size");
  var maxRows = 20;
  var x = 1;

  var html = '';
  html += '<tr>';
  html += '<td><input type="text" name="b_title[]" class="form-control"/></td>';
  html += '<td><input type="number" name="b_page[]" class="form-control"/></td>';
  html += '<td><input type="text" name="b_author[]" class="form-control"/></td>';
  html += '<td><input type="text" name="b_publication[]" class="form-control"/></td>';
  html += '<td><input type="text" name="b_type[]" class="form-control"/></td>';
  html += '<td><input type="number" name="b_price[]" class="form-control"/></td>';
  html += '<td><button type="button" id="remove" class="btn btn-danger">Remove</span>  <
    /button></td > < /tr> </div > ';

  $input.val(0);

  $(".alter").click(function() {
    if ($(this).hasClass('plus_one'))
      $input.val(parseInt($input.val()) + 1);
    else if ($input.val() >= 1)

      $input.val(parseInt($input.val()) - 1);

    else if ($input.val() == 0) // This part
      $("#b_table").on('change', function(e) { //is just 
        $(this).closest('tr').remove(); // what I assume
        x--; // to be 
      }); // the solution

  });

  $("#add").click(function(e) {
    if (x <= maxRows) {
      $("#b_table").append(html);
      x++;
      $input.val(parseInt($input.val()) + 1);
    }
  });

  $("#b_table").on('click', '#remove', function(e) {

    $(this).closest('tr').remove();
    x--;
    $input.val(parseInt($input.val()) - 1);
  });

});

这是任务一的 HTML 代码：

<table class="table table-bordered table-repsonsive" id="b_table">
    <tr>
        <th>Title</th>
        <th>Page</th>
        <th>Author</th>
        <th>Publication</th>
        <th>Type</th>
        <th>Price</th>
        <th><button type="button" id="add" class="btn btn-primary">Add</button></th>
    </tr>
</table>

这是任务二的 HTML 代码：

 <div class="input-group-append" role="group" >
    <input type="text" class="form-control" name="b_size" id="b_size"/>
    <button type="button" class="btn btn-primary alter plus_one"><i class="fas fa-plus"></i></button>
    <button type="button" class="btn btn-danger alter minus_one"><i class="fas fa-minus"></i></button>
  </div>

最后，这是正在进行的工作，可帮助您进行可视化：

 $(document).ready(function(e) { var $input = $("#b_size"); var maxRows = 20; var x = 1; var html = ''; html += '<tr>'; html += '<td><input type="text" name="b_title[]" class="form-control"/></td>'; html += '<td><input type="number" name="b_page[]" class="form-control"/></td>'; html += '<td><input type="text" name="b_author[]" class="form-control"/></td>'; html += '<td><input type="text" name="b_publication[]" class="form-control"/></td>'; html += '<td><input type="text" name="b_type[]" class="form-control"/></td>'; html += '<td><input type="number" step=0.01 name="b_price[]" class="form-control"/></td>'; html += '<td><button type="button" id="remove" class="btn btn-danger">Remove</span></button></td></tr> </div>'; $input.val(0); $(".alter").click(function() { if ($(this).hasClass('plus_one')) $input.val(parseInt($input.val()) + 1); else if ($input.val() >= 1) $input.val(parseInt($input.val()) - 1); }); $("#add").click(function(e) { if (x <= maxRows) { $("#b_table").append(html); x++; $input.val(parseInt($input.val()) + 1); } }); $("#b_table").on('click', '#remove', function(e) { $(this).closest('tr').remove(); x--; $input.val(parseInt($input.val()) - 1); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <label>Number of Books</label> <input type="text" id="b_size" /> <button type="button" class="alter plus_one">ADD</button> <button type="button" class="alter minus_one">REMOVE</button> </div> <table id="b_table"> <tr> <th>Title</th> <th>Page</th> <th>Author</th> <th>Publication</th> <th>Type</th> <th>Price</th> <th><button type="button" id="add" class="btn btn-primary">Add</button></th> </tr> </table>

Answer 1

递减计数器时，检查它是否小于表中的行数。 如果是，删除最后一行。

 $(document).ready(function(e) { var $input = $("#b_size"); var maxRows = 20; var x = 1; var html = ''; html += '<tr>'; html += '<td><input type="text" name="b_title[]" class="form-control"/></td>'; html += '<td><input type="number" name="b_page[]" class="form-control"/></td>'; html += '<td><input type="text" name="b_author[]" class="form-control"/></td>'; html += '<td><input type="text" name="b_publication[]" class="form-control"/></td>'; html += '<td><input type="text" name="b_type[]" class="form-control"/></td>'; html += '<td><input type="number" step=0.01 name="b_price[]" class="form-control"/></td>'; html += '<td><button type="button" id="remove" class="btn btn-danger">Remove</span></button></td></tr> </div>'; $input.val(0); $(".alter").click(function() { if ($(this).hasClass('plus_one')) $input.val(parseInt($input.val()) + 1); else if ($input.val() >= 1) { $input.val(parseInt($input.val()) - 1); if ($input.val() < $("#b_table tr:has(input)").length) { $("#b_table tr:has(input)").last().remove(); } } }); $("#add").click(function(e) { if (x <= maxRows) { $("#b_table").append(html); x++; $input.val(parseInt($input.val()) + 1); } }); $("#b_table").on('click', '#remove', function(e) { $(this).closest('tr').remove(); x--; $input.val(parseInt($input.val()) - 1); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <label>Number of Books</label> <input type="text" id="b_size" /> <button type="button" class="alter plus_one">ADD</button> <button type="button" class="alter minus_one">REMOVE</button> </div> <table id="b_table"> <tr> <th>Title</th> <th>Page</th> <th>Author</th> <th>Publication</th> <th>Type</th> <th>Price</th> <th><button type="button" id="add" class="btn btn-primary">Add</button></th> </tr> </table>