简体   繁体   中英

How can I remove an HTML element using javascript in this specific situation

I have this script, it has two tasks:

  1. add/remove dynamic input box element, let's call that 'input_box_a'.

  2. add/remove one value on the input box, lets call it 'input_box_b'

so lets say there is an empty input box, whenever I click add it adds 1, and when I click remove it remove 1.

Now, doing task one, which is adding/removing input box, also adds and remove value to the 'input_box_b'.

My problem is, lets say I click add button on task two three times, it would put 3 values on the 'input_box_b', and when I add three input box using task one, it would add 3 more additional value, the total now is 6, if I clicked remove button on the task two, three times, it would subtract 3 values.

What I want is when I click the remove button, on task two, for the fourth time, I also want to remove the input boxes that were previously added using task one.

Here is my reference for this code this is basically what it does, How to count dynamically added inputs?

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

Here is the script:

$(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);
  });

});

Here is the HTML code on task one:

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

And here is the HTML code for task two:

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

And last, here is the work in progress to help you visualize:

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

When decrementing the counter, check if it's less than the number of rows in the table. If it is, remove the last row.

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM