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

问题描述 投票:-1回答:1

我有这个脚本,它有两个任务:

  1. 添加/删除动态输入框元素,我们称其为'input_box_a'。

  2. 在输入框中添加/删除一个值,我们称其为'input_box_b'

所以可以说有一个空的输入框,每当我单击添加时,它就会添加1,而当单击删除时,它会删除1。

现在,执行任务一,即添加/删除输入框,还向'input_box_b'添加和删除值。

[我的问题是,让我在任务上单击两次两次添加按钮,它将在'input_box_b'上放置3个值,当我使用任务1添加三个输入框时,它将添加3个附加值,总计现在为6,如果我在任务上单击两次删除按钮,三下,它将减去3个值。

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

这里是我对这段代码的参考,基本上就是它的作用,How to count dynamically added inputs?

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>
javascript jquery html
1个回答
0
投票

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

$(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>
© www.soinside.com 2019 - 2024. All rights reserved.