Ajax Question

Updating a client side table

I am reading data from a csv file and showing it in the form of table on screen. I have checkbox before every row with 'ID' saved as value in respective checkboxes. Now I want to remove fields with 'checked' checkboxes from the displayed table on the click of button - Cancel/Save

HTML Code-

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
<script src=""></script>
<script src=""></script>
<script src ="" type="text/javascript"> </script>
<!--<script type="text/javascript" src="JavaScript.js"></script>-->
<script type="text/javascript" src="JavaScript2.js"></script>
table, th, td {
border: 1px solid black;
border-collapse: collapse;

th, td {
padding: 15px;

th {
text-align: left;

table {
border-spacing: 5px;



<div class="container">
<div class="row">
<p>KLMNO </p>
<div class="panel panel-primary">
<div class="panel-heading">KKKK</div>
<div class="panel-body">
<div class="row">
<div class="col-sm-12 col-sm-offset-1">
<div class="page-header">
<form id="form1" runat="server" class="form-horizontal">
<div class="form-group">
<div class="col-sm-5">
<div class="col-sm-6"><input type="file" accept=".csv" id="fileUpload"/></div>
<div class="col-sm-6"><input type="button" id="upload" class="btn btn-primary" value="Upload" /></div>

<div class="col-sm-7">
<div class="col-sm-2"><input type="button" id="cancel" class="btn btn-primary btn pull-right" value="Cancel/Save" style="visibility:hidden" /></div>
<div class="col-sm-2"><input type="button" id="process" class="btn btn-primary btn pull-right" value="Process" style="visibility:hidden" /></div>

<div class="row">
<div class="col-sm-12">
<div class="panel panel-default" style="align-self:center">
<div class="panel-body" style="max-height: 400px;min-height:400px;overflow-y: scroll;">
<div class="row">
<div class="col-sm-12"><center>
<div class="input-append" id="filterDev" style="visibility:hidden">
<input name="search" id="search" placeholder="Enter PO to filter" />
<input type="button" value="Filter" id="filter" class="btn btn-primary" />
</div></center></div><br /><br />

<div class="row">
<div class="col-sm-12" id="dvCSV"></div>





$(function () {
$("#upload").bind("click", function () {

var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.csv|.txt)$/;
if (regex.test($("#fileUpload").val().toLowerCase())) {
if (typeof (FileReader) != "undefined") {
var reader = new FileReader();
reader.onload = function (e) {
var table = $("<table />");
var rows ="\n");
for (var i = 0; i < rows.length; i++) {
var row = $("<tr />");
var cells = rows[i].split(",");

$("<td/>").html('<input type="checkbox" id='+cells[0]+'>').appendTo(row);
for (var j = 0; j < cells.length; j++) {

$("<td/>").html('<input type="text" disabled value=' +cells[j]+ '>').appendTo(row);
document.getElementById("cancel").style.visibility = "visible";
document.getElementById("process").style.visibility = "visible";
document.getElementById("filterDev").style.visibility = "visible";
//document.getElementById("filter").style.visibility = "visible";

} else {
alert("This browser does not support HTML5.");
} else {
alert("Please upload a valid CSV file.");


How can this be implemented?


To remove checked checkboxes you can use jQuery.

To remove just the checkboxes:


To do this "on a submit" of something, like a button click:

//Specific for button with ID someButton
$('button #someButton').on('click', function() {

Have a look at the jQuery checked selector, especially when combining it with the .is() function.

Like @Kartal answer, but without the .each() method you can delete all selected rows from the table like so:

//Remove all selected rows
$('button #someButton').on('click', function() {
    $('tr > input:checked').remove();

The > selector is described here