<!DOCTYPE html>
<
html
>
<
head
>
<
meta
content="
initial-scale
=
1
,
maximum-scale
=
1
,
user-scalable
=
0
"
name
=
"viewport"
/>
<
meta
name
=
"viewport"
content
=
"width=device-width"
/>
<
link
rel
=
"stylesheet"
href
=
<
script
type
=
"text/javascript"
</
script
>
<
script
type
=
"text/javascript"
src
=
</
script
>
<
style
>
td {
text-align: center;
}
</
style
>
</
head
>
<
body
>
<
h2
>Delete single row using DataTables plugin</
h2
>
<
table
id
=
"tableID"
class
=
"display"
style
=
"width:100%"
>
<
thead
>
<
tr
>
<
th
>StudentID</
th
>
<
th
>StudentName</
th
>
<
th
>Age</
th
>
<
th
>Gender</
th
>
<
th
>Marks Scored</
th
>
</
tr
>
</
thead
>
<
tbody
>
<
tr
>
<
td
>ST1</
td
>
<
td
>Prema</
td
>
<
td
>35</
td
>
<
td
>Female</
td
>
<
td
>320</
td
>
</
tr
>
<
tr
>
<
td
>ST2</
td
>
<
td
>Wincy</
td
>
<
td
>36</
td
>
<
td
>Female</
td
>
<
td
>170</
td
>
</
tr
>
<
tr
>
<
td
>ST3</
td
>
<
td
>Ashmita</
td
>
<
td
>41</
td
>
<
td
>Female</
td
>
<
td
>860</
td
>
</
tr
>
<
tr
>
<
td
>ST4</
td
>
<
td
>Kelina</
td
>
<
td
>32</
td
>
<
td
>Female</
td
>
<
td
>433</
td
>
</
tr
>
<
tr
>
<
td
>ST5</
td
>
<
td
>Satvik</
td
>
<
td
>41</
td
>
<
td
>male</
td
>
<
td
>162</
td
>
</
tr
>
<
tr
>
<
td
>ST6</
td
>
<
td
>William</
td
>
<
td
>37</
td
>
<
td
>Female</
td
>
<
td
>372</
td
>
</
tr
>
<
tr
>
<
td
>ST7</
td
>
<
td
>Chandan</
td
>
<
td
>31</
td
>
<
td
>male</
td
>
<
td
>375</
td
>
</
tr
>
<
tr
>
<
td
>ST8</
td
>
<
td
>David</
td
>
<
td
>45</
td
>
<
td
>male</
td
>
<
td
>327</
td
>
</
tr
>
<
tr
>
<
td
>ST9</
td
>
<
td
>Harry</
td
>
<
td
>29</
td
>
<
td
>male</
td
>
<
td
>205</
td
>
</
tr
>
<
tr
>
<
td
>ST10</
td
>
<
td
>Frost</
td
>
<
td
>29</
td
>
<
td
>male</
td
>
<
td
>300</
td
>
</
tr
>
<
tr
>
<
td
>ST14</
td
>
<
td
>Fiza</
td
>
<
td
>31</
td
>
<
td
>Female</
td
>
<
td
>750</
td
>
</
tr
>
<
tr
>
<
td
>ST15</
td
>
<
td
>Silva</
td
>
<
td
>34</
td
>
<
td
>male</
td
>
<
td
>985</
td
>
</
tr
>
</
tbody
>
</
table
>
<
br
/>
<
button
id
=
"btnID"
><
b
>Select and Delete row</
b
></
button
>
<
script
>
/* Initialization of datatables */
$(document).ready(function () {
// Paging and other information are
// disabled if required, set to true
var mytableVar = $('#tableID').DataTable({
"paging": false,
"info": false
});
// Ordering the table in descending
// order of students marks
mytableVar.order([[4, 'desc']]).draw(false);
$('#tableID tbody').on('click', 'tr', function () {
// Check for 'selected' class and remove
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
}
else {
mytableVar.$('tr.selected').removeClass('selected');
$(this).addClass('selected');
}
});
// On button click, remove the row with setting
// the draw() to false
// draw() API is used to reflect the changes
// after a action
$('#btnID').click(function () {
mytableVar.row('.selected').remove().draw(false);
});
});
</
script
>
</
body
>
</
html
>