We Keep Coding

Delete Row in table

My program basically displays books and other information about it. It also should be able to delete said book from the library and also the array in which it is stored. This is where my problem lies, I can't seem to delete that exact book from the display and the array. I tried using array.pop() and deleteRow(), but they only delete from the bottom. Thanks in advance for the help.
let myLibrary = [];
function book(name, author, pages, hasRead) {
this.name = name;
this.author = author;
this.pages = pages;
this.read = hasRead;
}
const Book1 = new book('Harry Potter', 'J. K. Rowling', 322, 'Yes');
const Book2 = new book('Great Expectations', 'Charles Dickens', 234, 'Yes');
const Book3 = new book('To Kill a Mockingbird', 'Harper Lee', 312, 'No')
const Book4 = new book('The Great Gatsby', 'F Scott Fitzgerald', 421, 'Yes');
const Book5 = new book('Ulysses', 'James Joyce', 267, 'Yes');
myLibrary.push(Book1, Book2, Book3, Book4, Book5);
function tableHeader() {
var html = "<table id=myTable1>";
html += "<tr>";
html += "<th class=top1>" + 'BOOK NAME'+ "</th>";
html += "<th class=top2>" + 'AUTHOR' + "</th>";
html += "<th class=top3>" + 'PAGES' + "</th>";
html += "<th class=top4>" + 'READ?' + "</th>";
html += "</tr>";
html += "</table>";
document.getElementById("top").innerHTML = html
}
tableHeader();
function viewLibrary() {
var html = "<table id=myTable>";
for (i = 0; i < myLibrary.length; i++) {
html += "<tr>";
html += "<td>" + [i+1] + "</td>";
html += "<td class=box1>" + myLibrary[i].name + "</td>";
html += "<td class=box2>" + myLibrary[i].author + "</td>";
html += "<td class=box3>" + myLibrary[i].pages + "</td>";
html += "<td class=box4>" + myLibrary[i].read + "</td>";
html += "<td class=del>" + 'X' + "</td>";
html += "</tr>";
}
html += "</table>";
document.getElementById("box").innerHTML = html;
}
viewLibrary();
function deleteBook() {
var button = document.querySelectorAll('.del');
var table = document.getElementById('myTable');
var rowCount = table.rows.length;
for (var i = 0; i < rowCount; i++) {
button[i].addEventListener('click', function () {
table.deleteRow(this);
console.log(event);
myLibrary.pop();
})
}
}
deleteBook();
function addModal() {
var btn = document.getElementById("new-book");
var modal = document.getElementById("myModal");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function () {
modal.style.display = "block";
}
span.onclick = function () {
modal.style.display = "none";
}
}
addModal();
function addBookToLibrary() {
let name = document.getElementById('name').value;
let author = document.getElementById('author').value;
let pages = document.getElementById('pages').value;
let read = document.getElementById('dropdown').value;
var submit = document.getElementById("submit");
var modal = document.getElementById("myModal");
if (name === '' || author === '' || pages === '' || read === '') {
alert("Fill out all values.")
return false;
} else {
submit.onclick = function () {
modal.style.display = "none";
}
const NewBook = new book(name, author, pages, read);
myLibrary.push(NewBook);
console.log(NewBook);
viewLibrary();
document.getElementById('name').value = '';
document.getElementById('author').value = '';
document.getElementById('pages').value = '';
document.getElementById('dropdown').value = '';
deleteBook();
}
}
let x = document.querySelectorAll('button');
x.forEach(button => {
button.addEventListener('click', () => {
let selection = button.innerHTML;
switch (selection) {
case "Submit":
addBookToLibrary();
break;
}
})
})
body {
background-color: #edc4b3;
}
/* The Modal (background) */
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
}
/* Modal Content/Box */
.modal-content {
background-color: #eddcd2;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 40%;
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
table {
margin-left: 14.5%;
margin-top: 5%;
width: 70%;
background-color: #edddd4;
border: 5px solid #8d99ae;
border-collapse: collapse;
margin-top: 2%;
}
#top {
color: #9d6b53;
}
#box {
margin-top: -1.5%;
}
.line {
color: #774936;
}
td {
padding-bottom: 10px;
padding-top: 10px;
padding-left: 10px;
}
h1 {
text-align: center;
text-transform: uppercase;
font-family: 'Notable', sans-serif;
}
h2 {
text-align: center;
text-decoration: underline;
}
#new-book {
margin-left: 79%;
background-color: #888;
cursor: pointer;
margin-top: 2%;
padding: 5px 5px;
font-weight: bold;
}
/*tr:first-child { font-weight: bold }*/
#name, #author, #pages {
width: 60%;
border: 0;
border-bottom: 1px solid black;
font-size: 1rem;
color: black;
background-color: #eddcd2;
font-family: 'Times New Roman', Times, serif;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 2px;
padding-right: 2px;
}
td {
font-family: 'Source Code Pro', monospace;
}
#author {
width: 58.5%;
}
#pages {
width: 61.3%;
}
#dropdown {
width: 28%;
background-color: #edddd4;
font-size: 17px;
cursor: pointer;
box-sizing: border-box;
margin: 0;
border: 1px solid black;
padding-top: 5px;
padding-bottom: 5px;
}
#submit {
background-color: black;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
width: 30%;
margin-left: 35%;
}
input:focus,
select:focus,
textarea:focus,
button:focus {
outline: none;
}
.del {
color: red;
cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Library</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<button id='new-book'>Add Book</button>
<section id="top"></section>
<section id="box"></section>
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<h2>Add a new book</h2>
<label for="name">Name of the Book:</label>
<input type="text" id="name" name="fname" required><br><br>
<label for="author">Name of the Author:</label>
<input type="text" id="author" name="lname" required><br><br>
<label for="pages">Number of Pages:</label>
<input type="number" id="pages" name="pname" required><br><br>
<p>Have you read this book?</p>
<select id="dropdown" required>
<option value="" disabled selected>Select your option</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select><br><br>
<button id="submit">Submit</button>
</div>
</div>
<script src="main.js"></script>
</body>
</html>

I would suggest a different approach. Instead of creating your new elements through string concatenation and .innerHTML (which has performance and security implications), use the DOM API to create your new elements and then just attach an event handler to the dynamically created cells that contain the X.
See additional comments inline below:
let headers = ["name", "author", "pages", "read"];
// Get your DOM references just once, not every time
// your event handlers execute and make sure to always
// reference the DOM element, rather than a property
// of the DOM element. That way, if you ever decide
// that you need a different property value, you won't
// have to scan the DOM for the element reference again.
let box = document.getElementById("box");
var btn = document.getElementById("new-book");
var modal = document.getElementById("myModal");
let closeModal = document.querySelector("span.close");
let name = document.getElementById('name');
let author = document.getElementById('author');
let pages = document.getElementById('pages');
let read = document.getElementById('dropdown');
var submit = document.getElementById("submit");
var modal = document.getElementById("myModal");
// DO NOT USE GETELEMENTSBYCLASSNAME and especially
// pass an idex to the first element within it:
// var span = document.getElementsByClassName("close")[0];
// Read this for details: https://stackoverflow.com/questions/54952088/how-to-modify-style-to-html-elements-styled-externally-with-css-using-js/54952474#54952474
// Instead, use .querySelector()
var span = document.querySelector(".close");
// Bind the "buttons" that show/hide the modal
// to a common function that does that.
btn.addEventListener('click', showHideModal);
closeModal.addEventListener('click', showHideModal);
function showHideModal(){
// No need for if/then. Just toggle the use of
// the .hidden CSS class
modal.classList.toggle("hidden");
}
submit.addEventListener('click', addBookToLibrary);
function book(name, author, pages, hasRead) {
this.name = name;
this.author = author;
this.pages = pages;
this.read = hasRead;
}
// No need to create variables to store new book references,
// and then push them into the Array. Just put the new books
// directly into the new Array.
let myLibrary = [
new book('Harry Potter', 'J. K. Rowling', 322, 'Yes'),
new book('Great Expectations', 'Charles Dickens', 234, 'Yes'),
new book('To Kill a Mockingbird', 'Harper Lee', 312, 'No'),
new book('The Great Gatsby', 'F Scott Fitzgerald', 421, 'Yes') ,
new book('Ulysses', 'James Joyce', 267, 'Yes')
];
function makeLibrary() {
// Get rid of the prior table (if exists)
if(document.getElementById("myTable")){
document.getElementById("myTable").remove();
}
// Instead of creating concatenated strings of HTML, which gets
// messy and hard to maintain, create DOM objects and set their
// propeties.
let tbl = document.createElement("table");
tbl.id = "myTable";
for (i = 0; i < myLibrary.length; i++) {
let row = document.createElement("tr");
let numCell = document.createElement("td");
numCell.textContent = i + 1;
row.appendChild(numCell);
// Loop over the headers array to build the row cells
headers.forEach(function(header, index){
let cell = document.createElement("td");
cell.textContent = myLibrary[i][header];
cell.classList.add("box" + (index + 1));
row.appendChild(cell); // Add the cell to the row
});
let delCell = document.createElement("td");
delCell.textContent = "X";
delCell.classList.add("del");
// Because the elements are now being created as elements
// and not strings, you can set up even binding on them.
delCell.addEventListener("click", function(){
myLibrary.splice(i, 1); // Remove book from library
this.closest("tr").remove(); // Remove row
});
row.appendChild(delCell); // Add cell to row
tbl.appendChild(row); // Add row to table
box.appendChild(tbl); // Add table to section
}
}
makeLibrary();
function addBookToLibrary() {
if (name.value === '' || author.value === '' || pages.value === '' || read.value === '') {
alert("Fill out all values.")
return false;
} else {
myLibrary.push(new book(name.value, author.value, pages.value, read.value));
makeLibrary();
name.value = '';
author.value = '';
pages.value = '';
dropdown.value = '';
showHideModal();
}
}
body {
background-color: #edc4b3;
}
/* Added classes */
h1.addBook { font-size: 1em; }
.hidden { display:none; }
/* The Modal (background) */
.modal {
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
}
/* Modal Content/Box */
.modal-content {
background-color: #eddcd2;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 40%;
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
table {
margin-left: 14.5%;
margin-top: 5%;
width: 70%;
background-color: #edddd4;
border: 5px solid #8d99ae;
border-collapse: collapse;
margin-top: 2%;
}
#top {
color: #9d6b53;
}
#box {
margin-top: -1.5%;
}
.line {
color: #774936;
}
td {
padding-bottom: 10px;
padding-top: 10px;
padding-left: 10px;
}
h1 {
text-align: center;
text-transform: uppercase;
font-family: 'Notable', sans-serif;
}
h2 {
text-align: center;
text-decoration: underline;
}
#new-book {
margin-left: 79%;
background-color: #888;
cursor: pointer;
margin-top: 2%;
padding: 5px 5px;
font-weight: bold;
}
/*tr:first-child { font-weight: bold }*/
#name, #author, #pages {
width: 60%;
border: 0;
border-bottom: 1px solid black;
font-size: 1rem;
color: black;
background-color: #eddcd2;
font-family: 'Times New Roman', Times, serif;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 2px;
padding-right: 2px;
}
td {
font-family: 'Source Code Pro', monospace;
}
#author {
width: 58.5%;
}
#pages {
width: 61.3%;
}
#dropdown {
width: 28%;
background-color: #edddd4;
font-size: 17px;
cursor: pointer;
box-sizing: border-box;
margin: 0;
border: 1px solid black;
padding-top: 5px;
padding-bottom: 5px;
}
#submit {
background-color: black;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
width: 30%;
margin-left: 35%;
}
input:focus,
select:focus,
textarea:focus,
button:focus {
outline: none;
}
.del {
color: red;
cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Library</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<button id='new-book'>Add Book</button>
<section id="top">
<!-- If you have static bits of HTML, don't create them
dynamically in JavaScript, go ahead and hard-code them
into the HTML. This will reduce the amount of JavaScript
and improve the speed of the page load. -->
<table id="myTable1">
<tr>
<th class="top1">BOOK NAME</th>
<th class=top2>AUTHOR</th>
<th class=top3>PAGES</th>
<th class=top4>READ?</th>
</tr>
</table>
</section>
<section id="box"></section>
<div id="myModal" class="modal hidden">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<!-- You can't have an H2 if it's not a child of an H1.
Don't choose a heading because of how it looks, pick
it because it represents the right heading level and
then style it with CSS. -->
<h1 class="addBook">Add a new book</h1>
<label for="name">Name of the Book:</label>
<input type="text" id="name" name="fname" required><br><br>
<label for="author">Name of the Author:</label>
<input type="text" id="author" name="lname" required><br><br>
<label for="pages">Number of Pages:</label>
<input type="number" id="pages" name="pname" required><br><br>
<p>Have you read this book?</p>
<select id="dropdown" required>
<option value="" disabled selected>Select your option</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select><br><br>
<button id="submit">Submit</button>
</div>
</div>
<script src="main.js"></script>
</body>
</html>

function deleteBook() {
var button = document.querySelectorAll('.del');
var table = document.getElementById('myTable');
var rowCount = table.rows.length;
for (var i = 0; i < rowCount; i++) {
button[i].addEventListener('click', function () {
table.deleteRow(i);
// I think pop will delete only the last element.
myLibrary.splice(i, 1);
})
}
}

this in table.deleteRow(this) refers to a HTMLTableCellElement.
According to this doc : https://www.w3schools.com/jsreF/met_table_deleterow.asp
You'll need to pass an index instead.
Edit :
What about adding a data-row attribute to your rows where you put the index, and then getting this index by using element.dataset.row
E.G :
var html = "<table id=myTable1>";
html += "<tr data-row=" + $yourIndex + ">";
html += "<th class=top1>" + 'BOOK NAME'+ "</th>";
html += "<th class=top2>" + 'AUTHOR' + "</th>";
html += "<th class=top3>" + 'PAGES' + "</th>";
html += "<th class=top4>" + 'READ?' + "</th>";
html += "</tr>";
html += "</table>";

Use Splice to remove the element from the array. Use this link for your reference.
your way of explanation is a little bit vague to understand.

Javascript uploading file alignment

In the above image the delete button need to align properly. in my code it get align based on file name length.
<script>
var filelist = new Array();
updateList = function () {
var input = document.getElementById('fileUploader');
var output = document.getElementById('divFiles');
var HTML = "<table>";
for (var i = 0; i < input.files.length; ++i) {
filelist[i]=input.files.item(i).name;
HTML += "<tr><td>" + filelist[i] + "</td><td> <button ></button></td></tr>";
}
HTML += "</table>";
output.innerHTML += HTML;
}
</script>

Please try this.
table {
border-collapse: separate;
border-spacing: 0 3px;
width: 600px;
}

Try this
table
{
table-layout: fixed;
width: 300px;
}
td
{
border: 1px solid green;
word-wrap:break-word;
}
try jsfiddle

<style>
table {
border-collapse: separate;
border-spacing: 0 2px;
width: 600px;
table-layout: fixed;
}
tr:nth-child(1n) {
border: 2px solid;
background-color: #eceff1;
color: Black;
}
tr:nth-child(2n) {
border: 2px solid;
color: Black;
}
td {
padding-top: .5em;
padding-left: .5em;
padding-right: .5em;
padding-bottom: .5em;
}
input[type="file"] {
display: none;
}
.label1 {
padding: 3px;
background: #fff;
display: table;
color:black;
}
button {
background-image: url('../../Images/delete.ico');
background-size: cover;
padding-right:0px;
background-color: Transparent;
cursor: pointer;
border: none;
width: 30px;
height: 30px;
}
</style>
<script>
$(document).ready(function () {
$(document).on('click', "button", function (e) {
$(this).closest('tr').remove();
});
});
</script>
<script>
var filelist = new Array();
updateList = function () {
var input = document.getElementById('fileUploader');
var output = document.getElementById('divFiles');
var HTML = "<table>";
for (var i = 0; i < input.files.length; ++i) {
filelist[i]=input.files.item(i).name;
HTML += "<tr><td>" + filelist[i] + "</td><td><button ></button></td></tr>";
}
HTML += "</table>";
output.innerHTML += HTML;
}
</script>
In the above script the delete button is showing in fixed order but i want the file name to be aligned at left and delete button need to at right side corner.

How to realign table columns after display property has been changed?

My goal is to get my table columns aligned. My table is currently set up this way because I wanted to have a table with a scroll bar and give each row it's own border and margin. When the mouse overs over a row that row changes color. I have these features but now I am having trouble aligning my table columns.
This is what my table looks like currently.
The tbody has a scroll bar and the each tbody tr has a margin. The tbody has a fixed height of 25vh. The table, thead, th, tbody elements are hardcoded into the html. The tbody rows are written by jquery after the page loads. I have given the td and th elements a 1px solid black border to show you there margins and padding. I plan on removing them once I have aligned them.
Below is my static html code.
<h3 id = "UpdateEmpyeeCaption">Update Employee Table</h3>
<table id = "UpdateEmployeeTable" >
<thead id ="UpdateTableHeadders" >
<tr>
<th class = "UpHeaderCell">EmployeeID </th>
<th class = "UpHeaderCell">Firstname </th>
<th class = "UpHeaderCell">Lastname </th>
<th class = "UpHeaderCell">Username </th>
<th class = "UpHeaderCell">Password </th>
<th class = "UpHeaderCell">Lifeguard </th>
<th class = "UpHeaderCell">Instructor </th>
<th class = "UpHeaderCell">Headguard </th>
<th class = "UpHeaderCell">Supervisor </th>
</tr>
</thead>
<tbody id = "UpdateEmployeeTableinner">
</tbody>
</table>
Next is the function I use to append the table rows into the tbody.
function loadTable( employeelist )
{
var MSG = "";
EmployeeList = employeelist;
for( var emp in employeelist )
{
var id = employeelist[emp]["employeeID"];
var firstname = employeelist[emp]["Firstname"];
var lastname = employeelist[emp]["Lastname"];
var username = employeelist[emp]["Username"];
var Password = employeelist[emp]["Password"];
var lifeguard = "";
if ( employeelist[emp]["Lifeguard"] == true ){ lifeguard = "Yes"; }else{ lifeguard = "no"; }
var instructor = "";
if ( employeelist[emp]["Instructor"] == true ){ instructor = "Yes"; }else{ instructor = "no"; }
var headguard = "";
if ( employeelist[emp]["Headguard"] == true ){ headguard = "Yes"; }else{ headguard = "no"; }
var supervisor = "";
if ( employeelist[emp]["Supervisor"] == true ){ supervisor = "Yes"; }else{ supervisor = "no"; }
MSG += "<tr class = \"UpdateEmployeeCell notHoverTable\">";
MSG += "<td class =\"upEmCell\"> "+id+" </td>";
MSG += "<td class =\"upEmCell\"> "+firstname+" </td>";
MSG += "<td class =\"upEmCell\"> "+lastname+" </td>";
MSG += "<td class =\"upEmCell\"> "+username+" </td>";
MSG += "<td class =\"upEmCell\"> "+Password+" </td>";
MSG += "<td class =\"upEmCell\"> "+lifeguard+" </td>";
MSG += "<td class =\"upEmCell\"> "+instructor+" </td>";
MSG += "<td class =\"upEmCell\"> "+headguard+" </td>";
MSG += "<td class =\"upEmCell\"> "+supervisor+" </td>";
MSG += "</tr>";
}//End of for each employee in employeelist
//Put the rows into tbody of the table.
$('#UpdateEmployeeTableinner').empty();
$('#UpdateEmployeeTableinner').append( MSG );
}/* End of Function loadTable */
My Css being applied to the table in the pitcure
/* Start of Update Employee Table*/
/*table*/
#UpdateEmployeeTable {
border: 3px solid black;
margin: 0;
padding: 0 0 0 0;
overflow:hidden;
display: block;
}
/*thead*/
#UpdateTableHeadders {
background: rgb(221,221, 221);
display: block;
padding: 0em 1em 0em 1em;/* top right bottom left*/
margin: 0; /*margin: <margin-top> || <margin-right> || <margin-bottom> || <margin-left>*/
border-bottom: 3px solid black;
}
/*th*/
.UpHeaderCell {
display: inline;
border: 1px solid black;
width: 11%;
}
/*tbody*/
#UpdateEmployeeTableinner {
border: 1px solid black;
background: white;
overflow: auto;
height: 25vh;
display: block;
}
/*tr inside tbody*/
.UpdateEmployeeCell {
border: 1px solid black;
margin: 0.5em 0.2em 0.5em 0.2em ; /*top right bottom left*/
display: block;
overflow: hidden;
padding: 0.1em;
}
/*td*/
.upEmCell {
display: inline-block;
border: 1px solid black;
}
/*When a table row does not have mouse hover*/
.notHoverTable {
background-color: rgb(4,211,255);
color: black;
border: 2px solid black;
}
/*When a table row does have mouse hover*/
.liOVERTable {
background-color: rgb(5, 255, 12);
border: 2px solid black;
color: black;
cursor: pointer;
cursor: hand;
}
/* End of Update Employee Table*/
So how can I change my CSS to display my table columns aligned with the correct spacing? Do I need to use Javascript to implement correct alignment? I would prefer keeping the solution as CSS.

Interactive filter in HTML table multiselect

I am creating an HTML table dynamically from JSON objects. I am trying to create a filter for one of the table columns. It works fine but I cannot make it work with a multiselect function.
I tried adding this line:
$('.One1').multiselect();
in my script, in different places and it did not work.
var data = {"headers":["One","Two","Three","Four","Five","Six","Seven","Number1","Number2"],"rows":[["One1","Two1","Three1","Four1","Five1","Six1","Seven1",11,1000],["One1","Two1","Three2","Four1","Five1","Six1","Seven1", 22, 2000],["One2","Two1","Three1","Four2","Five1","Six1","Seven1", 77, 99]]};
//////First table - Three1 for Views
var table1 = '<div class = "filter_box"></div><div class="row"><div class="col-lg-6" style="background-color: #e90649; width: 117px;"> </div><div class="col-lg-6" style="max-width: 100px; padding-left: 10px; font-size: 2vw;">Table<br/><br/><span style="font-size: 1vw;">One1, Three1, Five1</span></div><div class="col-lg-6"><div class="container"><table><thead><tr></tr><tr><th>One</th><th>Two</th><th>Three</th><th>Four</th><th>Five</th><th>Six</th><th>Seven</th><th>Number1</th><th>Number2</th></tr></thead><tbody>';
var One = '<div class = "filter"><select class="One1" data-col="0"><option value="a">' + "One" + '</option>';
for (i = 0; i < data.rows.length; i++)
{
table1 +="<tr><td>" + data.rows[i][0] + "</td><td>" + data.rows[i][1] + "</td><td>" + data.rows[i][2] + "</td><td>" + data.rows[i][3] + "</td><td>" + data.rows[i][4] + "</td><td>" + data.rows[i][5] + "</td><td>" + data.rows[i][6] + "</td><td>" + data.rows[i][7].toLocaleString() + "</td><td>" + data.rows[i][8].toLocaleString() + "</td><td>" + "</td></tr>";
// Interactive filters
One +='<option value="' + i + '">' + data.rows[i][0] + '</option>';
}
table1 += '</tbody></table></div></div></div>';
One +='</select></div>';
$("#one").html(table1);
$(".filter_box").html(One);
////First table - Filter
$('.One1').change(function () {
var values = [];
$('.One1').each(function () {
var colIdx = $(this).data('col');
$(this).find('option:selected').each(function () {
if ($(this).val() != "") values.push({
text: $(this).text(),
colId: colIdx
});
});
});
One1('#one table > tbody > tr', values);
});
function One1(selector, values) {
$(selector).each(function () {
var sel = $(this);
var txt = sel.find('td:eq(0)').text().trim();
var hwMatches = values.filter(function(ele, idx) {
return ele.text == txt;
}).length;
sel.toggle(hwMatches > 0 || values.length == 0);
});
};
//$('.One1').multiselect();
#import url('https://fonts.googleapis.com/css?family=Roboto');
body, * {
margin: 0;
color:#fff;
font-family: Roboto;
text-transform:capitalize;
}
.row {
display: table;
width: 100%;
height: 241px;
background-color:#454545;
}
.row > .col-lg-6 {
display: table-cell;
vertical-align: middle;
}
.container {
/*display: flex;*/
flex-wrap: wrap;
}
.container > div {
padding: 15px;
margin: 5px;
flex: 0 0 calc(100% - 20px);
text-align: left;
}
/*img {
padding-left: 7%;
max-height:55px;
width:auto;
}*/
td{
padding: 2px 2px;
text-align: center;
margin: 6px 0;
border: none;
}
table{
width: 100%;
background-color:#454545;
font-weight:500;
border-collapse: separate;
border-spacing:0.3em 1.1em;
color: #fff;
border: 0;
}
tr{
font-size: 1.1em;
}
th {
color: #CCC;
font-size: 0.7em;
}
#one,#two,#three,#four{
padding-top:2%;
}
.filter
{
margin:1px;
width:20%;
text-align:center;
display:inline-block;
}
.filter_box
{
text-align:center;
display:inline-block;
width:100%;
}
.filter select, .multiselect dropdown-toggle btn btn-default {
min-width:120px;
-webkit-appearance: button;
-webkit-border-radius: 2px;
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
-webkit-padding-end: 20px;
-webkit-padding-start: 2px;
-webkit-user-select: none;
background-image: url(http://i62.tinypic.com/15xvbd5.png), -webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
background-position: 97% center;
background-repeat: no-repeat;
border: 1px solid #AAA;
color: #000;
font-size: inherit;
margin: 3px;
overflow: hidden;
padding: 1px 10px;
text-overflow: ellipsis;
white-space: nowrap;
}
/*
tr th:nth-child(5) {
background: red;
display:none;
}
tr td:nth-child(5) {
background: red;
display:none;
}
*/
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<div id="one"></div>

When you declare your select, you can specify it is multiple:
var One = '<div class = "filter"><select class="One1" data-col="0"><option value="a">' + "One" + '</option>';
Change it to:
var One = '<div class = "filter"><select multiselect class="One1" data-col="0"><option value="a">' + "One" + '</option>';
Result:
var data = {"headers":["One","Two","Three","Four","Five","Six","Seven","Number1","Number2"],"rows":[["One1","Two1","Three1","Four1","Five1","Six1","Seven1",11,1000],["One1","Two1","Three2","Four1","Five1","Six1","Seven1", 22, 2000],["One2","Two1","Three1","Four2","Five1","Six1","Seven1", 77, 99]]};
//////First table - Three1 for Views
var table1 = '<div class = "filter_box"></div><div class="row"><div class="col-lg-6" style="background-color: #e90649; width: 117px;"> </div><div class="col-lg-6" style="max-width: 100px; padding-left: 10px; font-size: 2vw;">Table<br/><br/><span style="font-size: 1vw;">One1, Three1, Five1</span></div><div class="col-lg-6"><div class="container"><table><thead><tr></tr><tr><th>One</th><th>Two</th><th>Three</th><th>Four</th><th>Five</th><th>Six</th><th>Seven</th><th>Number1</th><th>Number2</th></tr></thead><tbody>';
var One = '<div class = "filter"><select multiple class="One1" data-col="0"><option value="a">' + "One" + '</option>';
for (i = 0; i < data.rows.length; i++)
{
table1 +="<tr><td>" + data.rows[i][0] + "</td><td>" + data.rows[i][1] + "</td><td>" + data.rows[i][2] + "</td><td>" + data.rows[i][3] + "</td><td>" + data.rows[i][4] + "</td><td>" + data.rows[i][5] + "</td><td>" + data.rows[i][6] + "</td><td>" + data.rows[i][7].toLocaleString() + "</td><td>" + data.rows[i][8].toLocaleString() + "</td><td>" + "</td></tr>";
// Interactive filters
One +='<option value="' + i + '">' + data.rows[i][0] + '</option>';
}
table1 += '</tbody></table></div></div></div>';
One +='</select></div>';
$("#one").html(table1);
$(".filter_box").html(One);
////First table - Filter
$('.One1').change(function () {
var values = [];
$('.One1').each(function () {
var colIdx = $(this).data('col');
$(this).find('option:selected').each(function () {
if ($(this).val() != "") values.push({
text: $(this).text(),
colId: colIdx
});
});
});
One1('#one table > tbody > tr', values);
});
function One1(selector, values) {
$(selector).each(function () {
var sel = $(this);
var txt = sel.find('td:eq(0)').text().trim();
var hwMatches = values.filter(function(ele, idx) {
return ele.text == txt;
}).length;
sel.toggle(hwMatches > 0 || values.length == 0);
});
};
//$('.One1').multiselect();
#import url('https://fonts.googleapis.com/css?family=Roboto');
body, * {
margin: 0;
color:#fff;
font-family: Roboto;
text-transform:capitalize;
}
.row {
display: table;
width: 100%;
height: 241px;
background-color:#454545;
}
.row > .col-lg-6 {
display: table-cell;
vertical-align: middle;
}
.container {
/*display: flex;*/
flex-wrap: wrap;
}
.container > div {
padding: 15px;
margin: 5px;
flex: 0 0 calc(100% - 20px);
text-align: left;
}
/*img {
padding-left: 7%;
max-height:55px;
width:auto;
}*/
td{
padding: 2px 2px;
text-align: center;
margin: 6px 0;
border: none;
}
table{
width: 100%;
background-color:#454545;
font-weight:500;
border-collapse: separate;
border-spacing:0.3em 1.1em;
color: #fff;
border: 0;
}
tr{
font-size: 1.1em;
}
th {
color: #CCC;
font-size: 0.7em;
}
#one,#two,#three,#four{
padding-top:2%;
}
.filter
{
margin:1px;
width:20%;
text-align:center;
display:inline-block;
}
.filter_box
{
text-align:center;
display:inline-block;
width:100%;
}
.filter select, .multiselect dropdown-toggle btn btn-default {
min-width:120px;
-webkit-appearance: button;
-webkit-border-radius: 2px;
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
-webkit-padding-end: 20px;
-webkit-padding-start: 2px;
-webkit-user-select: none;
background-image: url(http://i62.tinypic.com/15xvbd5.png), -webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
background-position: 97% center;
background-repeat: no-repeat;
border: 1px solid #AAA;
color: #000;
font-size: inherit;
margin: 3px;
overflow: hidden;
padding: 1px 10px;
text-overflow: ellipsis;
white-space: nowrap;
}
/*
tr th:nth-child(5) {
background: red;
display:none;
}
tr td:nth-child(5) {
background: red;
display:none;
}
*/
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<div id="one"></div>

For example if you want to filter "One1" in a table, you can simply use something like: $('td:contains("One1")').parent().hide(); and $('td:contains("One1")').parent().show(); as a filter.
If you want to filter specific column, combine something like this with your selector: $('table tr > td:nth-child(yourColumnNumberShouldBeFiltered), table tr > th:nth-child(yourColumnNumberShouldBeFiltered)'). These expressions may be used in a function binded to 'change' event of your multiselect.
UPDATE: Above method, because of using :contains(), filter all of "One1", "One12", and so on! For exact match filteration you can use something like this:
$('table tr > td:nth-child(yourColumnNumberShouldBeFiltered)').filter(function() {
return $(this).text() == "yourExactTextToFilter";
}).parent().hide();
$('table tr > td:nth-child(yourColumnNumberShouldBeFiltered)').filter(function() {
return $(this).text() == "yourExactTextToFilter";
}).parent().show();
or for better performance of getting exact matches, see this link: Select element by exact match of its content

Creating Event Listeners to Delete Objects from localStorage

I am working on a to-do list. I am trying to make a "deleteThis" function for each row added to the window. So far i can Save, Clear(form) and Clear(storage). But i want to be able to remove individual rows too by adding a td at the end of each row. The result should work so that the user can click on an X to remove that row from local storage.
HTML/CSS
<!DOCTYPE html>
<html><head>
<meta charset="UTF-8">
<title>Local Storage</title>
<style>
body {
background:#999;
overflow:hidden;
}
.c1 {
font-family: 'Open Sans', sans-serif;
font-weight:800;
font-size:120%;
border:none;
border-radius:3.33%;
padding:24px 5px;
width:600px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow: 1px 1px 0 0 #FFF, 5px 5px 40px 2px #BBB inset;
-moz-box-shadow: 1px 1px 0 0 #FFF, 5px 5px 40px 2px #BBB inset;
-webkit-box-shadow: 1px 1px 0 0 #FFF, 5px 5px 40px 2px #BBB inset;
-webkit-background-clip: padding-box;
outline: 0;
}
#tbl {
background:#F9FBFF;
padding:8px 7px;
border-radius:2%;
}
:focus {
outline:0;
}
#tableRNDR {
background:#F9FBFF;
border-radius:2%;
font-family: 'Open Sans', sans-serif;
font-weight:600;
font-size:110%;
margin:auto;
position:relative;
width:700px;
overflow:hidden;
}
th, td {
padding:18px 24px;
}
input[type=date]::-webkit-inner-spin-button {
-webkit-appearance: none;
display: none;
}
input[type=date]::-webkit-calendar-picker-indicator {
color: #666;
height: 12px;
position: relative;
width: 12px;
}
input[type="time"]::-webkit-clear-button {
display: none;
}
#wrapper {
width:700px;
font-size:150%;
margin:auto;
}
#btnWrapper {
margin:auto;
width:400px;
}
.btnsC {
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background-color:#f9f9f9;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #dcdcdc;
cursor:pointer;
color:#666666;
font-family: 'Open Sans', sans-serif;
font-weight:600;
font-size:17px;
padding:6px 24px;
text-shadow:0px 1px 0px #ffffff;
}
.btnsC:hover {
background-color:#e9e9e9;
}
.btnsC:active {
position:relative;
top:2px;
}
</style>
</head>
<body>
<div>Ehawk's Planner V2.3</div>
<div id="wrapper">
<table style="width:100%;" id="tbl">
<tbody><tr>
<td>
<input id="txtpname" type="text" class="c1" placeholder="Name" />
</td>
</tr>
<tr>
<td>
<input id="txtpaddr" class="c1" placeholder="Description" />
</td>
</tr>
<tr>
<td>
<input id="txtpcity" type="time" class="c1" placeholder="Time" />
</td>
</tr>
<tr>
<td>
<input id="txtpemil" type="date" class="c1" placeholder="Date" />
</td>
</tr>
</tbody></table>
<br>
<div id="btnWrapper">
<input id="btnsave" class="btnsC" type="button" value="Save">
<input id="btnclear" class="btnsC" type="button" value="Clear">
<input id="btnclearstorage" class="btnsC" type="button" value="Clear Storage">
</div>
<div id="dvcontainer"><br>
</div>
</div>
</body></html>
Javascript
<script>
(function () {
//Goals Object
var Goals = {
Name: "",
Descript: "",
timeVal:"",
dateVal: ""
};
var Uilogic = {
//Clear all
clearuielements: function () {
var inputs = document.getElementsByClassName("c1");
for (i = 0; i < inputs.length; i++) {
inputs[i].value = "";
}
},
//Save to LS
saveitem: function () {
var lscount = localStorage.length; //Length
var inputs = document.getElementsByClassName("c1");
Goals.Name = inputs[0].value;
Goals.Descript = inputs[1].value;
Goals.timeVal = inputs[2].value;
Goals.dateVal = inputs[3].value;
//Convert to JSON/Store it
localStorage.setItem("Goals_" + lscount, JSON.stringify(Goals));
location.reload();
},
//Load Data from LS
loaddata: function () {
var datacount = localStorage.length;
if (datacount > 0)
{
var renderData = "<table id='tableRNDR'>";
renderData += "<br /><tr><th>Id</th><th>Name</th><th>Description</th> <th>Time</th><th>Date</th><th></th></tr>";
for (i = 0; i < datacount; i++) {
var key = localStorage.key(i); //Get Key
var Goals = localStorage.getItem(key); //Get Data
var data = JSON.parse(Goals); //Parse Data
var iCount = i + 1;
renderData += "<tr><td>" + iCount + "</td><td>" + data.Name + " </td>";
renderData += "<td>" + data.Descript + "</td>";
renderData += "<td>" + data.timeVal + "</td>";
renderData += "<td>" + data.dateVal + "</td>";
renderData += "<td id='xData'>" + "&timesb;" + "</td>";
}
renderData+="</table>";
dvcontainer.innerHTML = renderData;
}
},
//Clear
clearstorage: function () {
var storagecount = localStorage.length; //Count
if (storagecount > 0)
{
for (i = 0; i < storagecount; i++) {
localStorage.clear();
}
}
window.location.reload();
}
};
//deleteThis
//Save
var btnsave = document.getElementById('btnsave');
btnsave.addEventListener('click', Uilogic.saveitem, false);
//Clear all
var btnclear = document.getElementById('btnclear');
btnclear.addEventListener('click', Uilogic.clearuielements, false);
//Clear LS
var btnclearstorage = document.getElementById('btnclearstorage');
btnclearstorage.addEventListener('click', Uilogic.clearstorage, false);
//Onload
window.onload = function () {
Uilogic.loaddata();
};
})();
</script>

This code handles the actual deletion:
function deleteRow()
{
//this refers to the delete button, it has an
//attribute called data-index with a reference to the key in LS
localStorage.removeItem(this.getAttribute("data-index"));
window.location.reload();
}
I edited the line where the delete button is added with this:
renderData += "<td class='xData' data-id='xData' data-index='"+key+"'>" + "&timesb;" + "</td>";
//set a data-id and data-index to this element, we need them to select the correct information.
I also added some code to attach click handlers to all the delete buttons:
Array.prototype.map.call(document.querySelectorAll("td[data-id='xData']"), function(element){
element.addEventListener("click", deleteRow, false); //attach a click handler to all delete buttons
} );
Normally I would put this into a StackOverflow code snippet, but localStorage won't work properly on code snippets, so I've put all the changes into a JSFiddle: http://jsfiddle.net/dy3c0fos/