Question 161139 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Can all Row Elements be removed in JQUERY?

I have this issue where I can’t delete all of my added row data in just one click, I tried $("#row").remove(); but it seems it removed one by one , I just want to remove all items added and uncheck all checkbox in the table when clicking removed. Did I miss something on my code?

$("#allcb").change(function() {
  $('tbody tr td input[type="checkbox"]').prop(
    "checked",
    $(this).prop("checked")
  );
});


$(document).on("click", "#remove_all", function() {

  var $checkbox = $(`input[type='checkbox']`);
  $("#row").remove();
  $checkbox.prop('checked', false);
  $checkbox.get(0).hasCovered = false;
});




$(document).on("keyup", ".quantity_input", function() {
  var $row = $(this).closest('.row');
  var value_input = 0;
  var price_value = 0;
  var total_value = 0;

  value_input = $(".quantity_input", $row).val();
  price_value = $(".price_value", $row).html();
  total_value = parseInt(value_input) * parseInt(price_value);
  $(".total_value_row", $row).text(total_value);
});

$(document).on("click", ".remove_data", function() {
  var $row = $(this).closest('.row');
  var checkboxName = $row.data('for');
  var $checkbox = $(`input[type="checkbox"][name="${checkboxName}"]`);
  
  $row.remove();
  $checkbox.prop('checked', false);
  $checkbox.get(0).hasCovered = false;
});


$(document).ready(function() {
  $("#add_data").click(function() {
    var grid = document.getElementById("Table1");
    var message = "Values                 Descriptionn";

    var checkBoxes = grid.getElementsByTagName("INPUT");
    var str = ''

    for (var i = 0; i < checkBoxes.length; i++) {
      if (
        checkBoxes[i].checked &&
        checkBoxes[i].name !== "allcb" &&
        !checkBoxes[i].hasCovered
      ) {
        var row = checkBoxes[i].parentNode.parentNode;
        str +=
          '<div id ="row" class="row" data-for="' + checkBoxes[i].id + '"><div class="col-md-8"><p class="me-3"> ' +
          '<a href="#" class="text-body">' +
          '<button type="button" class = "remove_data" id="remove_data">Remove item</button></a>&nbsp' +

          '<span>Quantity</span>&nbsp' +
          row.cells[2].innerHTML +
          "</a></p> " +
          '<span class="me-1">Price </span>&nbsp' +
          '<span class="me-1 price_value">' +
          row.cells[1].innerHTML +
          "</span>&nbsp" +
          '<input type="number" id="quantity_input" class="form-control form-control-sm w-px-75 quantity_input" value="1" min="1" max="5"/>&nbsp' +
          '<span class= "total_value_row" >total value is</span> ' +
          "</div><hr></div>";
        checkBoxes[i].hasCovered = true;
      }
    }
    $(".whole-div-class").append(str);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <table border="1" id="Table1">
      <thead>
        <tr>
          <th>
            <input type="checkbox" id="allcb" name="allcb" />
          </th>
          <th>Price</th>
          <td>Quantity</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <input type="checkbox" id="cb1" name="cb1" />
          </td>
          <td>200</td>
          <td> 25</td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" id="cb2" name="cb2" />
          </td>
          <td>300</td>
          <td>30</td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" id="cb3" name="cb3" />
          </td>
          <td>400</td>
          <td>50</td>
        </tr>
      </tbody>
    </table>
    <br />
    <button type="button" id="add_data">Add datas</button>

    <button type="button" id="remove_all">Remove all</button>
    
    
    <!-- <div class="row whole-div-class"></div> -->
    <ul class="list-group mb-3 row whole-div-class"></ul>
Tags:

2

Answers


  1. 0

    i’m not sure what you intend to do but in js if you remove line 10 and replace line 11 with this it will work:

    var $checkbox = $(`input[type='checkbox']`);
    Login or Signup to reply.
  2. 0

    Use class instead of ID. Id should be unique. Secondly don’t give row class to the ul. Because when you click remove all button, it is removing that ul and that’s why the next time you are adding items, they are not showing. Here is the updated Code:-

    $("#allcb").change(function() {
      $('tbody tr td input[type="checkbox"]').prop(
        "checked",
        $(this).prop("checked")
      );
    });


$(document).on("click", "#remove_all", function() {

  var $checkbox = $(`input[type='checkbox']`);
  $(".row").remove();
  $checkbox.prop('checked', false);
});




$(document).on("keyup", ".quantity_input", function() {
  var $row = $(this).closest('.row');
  var value_input = 0;
  var price_value = 0;
  var total_value = 0;

  value_input = $(".quantity_input", $row).val();
  price_value = $(".price_value", $row).html();
  total_value = parseInt(value_input) * parseInt(price_value);
  $(".total_value_row", $row).text(total_value);
});

$(document).on("click", ".remove_data", function() {
  var $row = $(this).closest('.row');
  var checkboxName = $(`.row[for="${$row.data('for')}"]`);
  var $checkbox = $(`input[type="checkbox"][name="${checkboxName}"]`);
  
  $row.remove();
  $checkbox.prop('checked', false);
});


$(document).ready(function() {
  $("#add_data").click(function() {
    var grid = document.getElementById("Table1");
    var message = "Values                 Descriptionn";

    var checkBoxes = grid.getElementsByTagName("INPUT");
    var str = ''

    for (var i = 0; i < checkBoxes.length; i++) {
      if (
        checkBoxes[i].checked &&
        checkBoxes[i].name !== "allcb"
      ) {
        var row = checkBoxes[i].parentNode.parentNode;
        str +=
          '<div id ="row" class="row" data-for="' + checkBoxes[i].id + '"><div class="col-md-8"><p class="me-3"> ' +
          '<a href="#" class="text-body">' +
          '<button type="button" class = "remove_data" id="remove_data">Remove item</button></a>&nbsp' +

          '<span>Quantity</span>&nbsp' +
          row.cells[2].innerHTML +
          "</a></p> " +
          '<span class="me-1">Price </span>&nbsp' +
          '<span class="me-1 price_value">' +
          row.cells[1].innerHTML +
          "</span>&nbsp" +
          '<input type="number" id="quantity_input" class="form-control form-control-sm w-px-75 quantity_input" value="1" min="1" max="5"/>&nbsp' +
          '<span class= "total_value_row" >total value is</span> ' +
          "</div><hr></div>";
      }
    }
    $(".whole-div-class").append(str);

  });
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>    
<table border="1" id="Table1">
      <thead>
        <tr>
          <th>
            <input type="checkbox" id="allcb" name="allcb" />
          </th>
          <th>Price</th>
          <td>Quantity</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <input type="checkbox" id="cb1" name="cb1" />
          </td>
          <td>200</td>
          <td> 25</td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" id="cb2" name="cb2" />
          </td>
          <td>300</td>
          <td>30</td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" id="cb3" name="cb3" />
          </td>
          <td>400</td>
          <td>50</td>
        </tr>
      </tbody>
    </table>
    <br />
    <button type="button" id="add_data">Add datas</button>

    <button type="button" id="remove_all">Remove all</button>
    <ul class="list-group mb-3 whole-div-class"></ul>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search