Trying to remove the whole table row html javascript

Trying to remove the whole table row html javascript - javascript

JAVASCRIPT
function takeOut(el) {
el.parentElement.remove();
}
document.getElementById('myButton').onclick = function () {
const name = document.getElementById('name').value;
const date = document.getElementById('date').value;
const amount = document.getElementById('amount').value;
const nameTd = '<td>' + name + '</td>';
const dateTd = '<td>' + date + '</td>';
const amountTd = '<td>' + '$'+ amount + '</td>' + '<td>' +
'<button id="removeBtn"type="button" onClick="takeOut(this)">X</button></td>';
const tr = '<tr>' + nameTd + dateTd + amountTd + '</tr>';
document.getElementById('table').insertAdjacentHTML('beforeend', tr);
document.getElementById('clearList').onclick = function () {
const cl = document.getElementById('table');
while (cl.hasChildNodes()) {
cl.removeChild(cl.firstChild);
}
}
document.getElementById('name').value = '';
document.getElementById('amount').value = '';
document.getElementById('date').value = '';
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Expense Tracker</title>
</head>
<body>
<h1>Expense Tracker</h1>
<h3>Add A New Item:</h3>
<label>Name: <input text="text" id="name"></label><br>
<label>Date:<input type="date" id="date"></label><br>
<label>Amount:<input text="text" id="amount"></label><br>
<button type="button" id="myButton">Add Expense</button>
<button type="button" id="clearList">Clear List</button>
<br>
<br>
<br>
<br>
<br>
<table border="1">
<tr>
<th>Name</th>
<th>Date</th>
<th>Amount</th>
<th>Remove</th>
</tr>
<tbody id="table">
</tbody>
</table>
<script src="script2.js"></script>
</body>
</html>
Hey so im trying to make the button with the x remove the whole element that its in so after the user inputs the expense they can remove that certain one. Everytime I click the button it only removes the actual button not the whole input.

It actually removes the parent element that has the button. But that is a td element. You want to delete the grandparent, so do:
el.parentElement.parentElement.remove();
It may be easier to just look for the closest tr element (among the ancestor elements):
el.closest("tr").remove();
function takeOut(el) {
el.closest("tr").remove();
}
document.getElementById('myButton').onclick = function() {
const name = document.getElementById('name').value;
const date = document.getElementById('date').value;
const amount = document.getElementById('amount').value;
const nameTd = '<td>' + name + '</td>';
const dateTd = '<td>' + date + '</td>';
const amountTd = '<td>' + '$' + amount + '</td>' + '<td>' +
'<button id="removeBtn"type="button" onClick="takeOut(this)">X</button></td>';
const tr = '<tr>' + nameTd + dateTd + amountTd + '</tr>';
document.getElementById('table').insertAdjacentHTML('beforeend', tr);
document.getElementById('clearList').onclick = function() {
const cl = document.getElementById('table');
while (cl.hasChildNodes()) {
cl.removeChild(cl.firstChild);
}
}
document.getElementById('name').value = '';
document.getElementById('amount').value = '';
document.getElementById('date').value = '';
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Expense Tracker</title>
</head>
<body>
<h1>Expense Tracker</h1>
<h3>Add A New Item:</h3>
<label>Name: <input text="text" id="name"></label><br>
<label>Date:<input type="date" id="date"></label><br>
<label>Amount:<input text="text" id="amount"></label><br>
<button type="button" id="myButton">Add Expense</button>
<button type="button" id="clearList">Clear List</button>
<br>
<br>
<br>
<br>
<br>
<table border="1">
<tr>
<th>Name</th>
<th>Date</th>
<th>Amount</th>
<th>Remove</th>
</tr>
<tbody id="table">
</tbody>
</table>
<script src="script2.js"></script>
</body>
</html>

Related

Loop only executes once/

In the code below 'len' is the length of text in a tag, the user enters a letter in a textbox, and inside 'result', with the help of .indexof() I am storing the index number of the letter present in the paragraph and then printing that letter in another tag.
But this loop only runs once whereas I want it to run until the statement in the while loop is true.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML 5 Boilerplate</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>Find letter:</p>
<form id="chk" method="post">
<label for="scen">Enter a scentence</label>
<!--<input type="text" name="scen" id="scen" placeholder="Enter a scentence">-->
<p id='scen'>Hello my friend</p>
<br><br>
<label for="letter">Enter the letter</label>
<input type="text" name="letter" id="letter" placeholder="Enter a letter" min="1">
<br>
<button type="button" onClick="myFunction()">Submit</button>
</form>
<p id="demo"></p>
<p id="demo2"></p>
<p id="demo3"></p>
<script >
function myFunction(){
var scen = document.getElementById('scen').innerHTML;
var spa = ' ';
var scen1 = scen.split(" ").join(spa);
var letter = document.getElementById('letter').value;
let err = "The letter does not exist in the sentence"
let result = scen.indexOf(letter);
var len = scen.length;
var a = 3;
var k = 0
for(var i = 0; i < scen1.length; i++)
{
document.getElementById('demo').innerHTML += '<span id="w' + i + '">' + scen1[i] + '</span>'
}
while(k <= len){
if(result>=0){
document.getElementById('demo3').innerHTML = scen.substring(result,result+1);
document.getElementById('demo').innerHTML = len;
}
else{
document.getElementById('demo2').innerHTML = err;
a--;
document.getElementById('demo').innerHTML = a;
break;
}
if(a==0){
window.alert('game over');
}
k++;
}
}
</script>
</body>
</html>

Because of the break condition in Else part of your code is making code to exit from loop.
Please see below code and comments which I have added in your code... and let me know...
function myFunction() {
var scen = document.getElementById('scen').innerHTML;
var spa = ' ';
var scen1 = scen.split(" ").join(spa);
var letter = document.getElementById('letter').value;
let err = "The letter does not exist in the sentence"
let result = scen.indexOf(letter);
var len = scen.length;
var a = 3;
var k = 0
for (var i = 0; i < scen1.length; i++) {
document.getElementById('demo').innerHTML += '<span id="w' + i + '">' + scen1[i] + '</span>'
}
while (k <= len) {
//console.log("Loop iteration ->",k); /*you can uncomment this statement to debug the loop is working or not *?
if (result >= 0) {
document.getElementById('demo3').innerHTML = scen.substring(result, result + 1);
document.getElementById('demo').innerHTML = len;
} else {
document.getElementById('demo2').innerHTML = err;
a--;
document.getElementById('demo').innerHTML = a;
// break; /* Commented this line so that your loop will run*/
}
if (a == 0) {
window.alert('game over');
}
k++;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML 5 Boilerplate</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>Find letter:</p>
<form id="chk" method="post">
<label for="scen">Enter a scentence</label>
<!--<input type="text" name="scen" id="scen" placeholder="Enter a scentence">-->
<p id='scen'>Hello my friend</p>
<br><br>
<label for="letter">Enter the letter</label>
<input type="text" name="letter" id="letter" placeholder="Enter a letter" min="1">
<br>
<button type="button" onClick="myFunction()">Submit</button>
</form>
<p id="demo"></p>
<p id="demo2"></p>
<p id="demo3"></p>
</body>
</html>

Remove the break. It's breaking you out of the loop.

" Uncaught TypeError: Cannot set properties of null"? whats wrong with document.getElementById('tmessage').innerHTML= message;?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Form Validations">
<title>Form Validations</title>
<script>
function checkFormData(){
// var message = "";
//Access the Text box content
var tname = document.getElementById('txt_name').value;
var temail = document.getElementById('txt_email').value;
var tage = document.getElementById('txt_age').value;
//Access the radio button values
var tgender1 = document.getElementById('radio1').checked;
var tgender2 = document.getElementById('radio2').checked;
//Access Checkbox
var tchkbox = document.getElementById('chkbox').checked;
var message="";
message += "Name: " + tname + "<br>";
message += "Email: " + temail + "<br>";
message += "Age: " + tage + "<br>";
message += "Male: " + tgender1 + "<br>";
message += "Female: " + tgender2 + "<br>";
message += "Agreed: " + tchkbox + "<br>";
// alert(message);
document.getElementById('tmessage').innerHTML= message; //error
}
</script>
</head>
<body>
<p id="tmesssage"></p>
<h1>Form Validations</h1>
<form action="https://phpbootcamp.com" method="get">
Name: <input type="text" name="tname" id="txt_name"/><br><br>
Email: <input type="text" name="temail" id="txt_email"/><br><br>
Age: <input type="text" name="tage" id="txt_age"><br><br>
Male <input type="radio" name="gender" id="radio1" checked>
Female <input type="radio" name="gender" id="radio2"><br><br>
<input type="checkbox" name="" id="chkbox"/> Agree to our Terms <br> <br>
<input type="button" name="submit" value="Submit" onclick="checkFormData();">
</form>
</body>
</html>

In your Code the id of p tag is tmesssage whereas in the below line :
document.getElementById('tmessage').innerHTML= message;
the id is tmessage where one s is missing.
Once you make both the id's the same your error will disappear.
Hope this will help you out.

ajax call goes to error function when i try to redirect from 1st jsp to 2nd jsp

I have created 2 jsp pages.In the 1st jsp screen there is a button called "display".when i click this button the page should redirect to the 2nd jsp screen.
I was able to redirect to the 2nd jsp page using window.location() in javascript but the ajax call fails and goes to the error function(). When i click the display button it does not show any dynamic data that is appended to the 2nd jsp.(shows only static content).`
//this is my javascript
var rowsperpage = 10;
var pageno = 1;
var totalpages = 0;
var tablecount=0;
function display()
{
var flag="two";
$.ajax({
type: "POST",
url: 'maunualmappingloadutility.jsp?value='+flag+'&Rowsperpage='+rowsperpage+'&Pageno='+pageno,
success: function(response)
{
var data = $.parseJSON(response);
var status = data.status;
if(status && status == "sucess")
{
var tbl="";
var textfilemapping=data.textfilemapping;
$.each(textfilemapping, function(key, value)
{
var id = value.id;
var data1 = value.col1;
var data2 = value.col2;
var data3 = value.col3;
var data4 = value.col4;
var data5 = value.col5;
var data6 = value.col6;
var data7 = value.col7;
var data8 = value.col8;
var data9 = value.col9;
tbl += '<tr id="'+id+'">';
tbl += '<td >' + id + '</td>';
tbl += '<td >' + data1 + '</td>';
tbl += '<td >' + data2 + '</td>';
tbl += '<td >' + data3 + '</td>';
tbl += '<td >' + data4 + '</td>';
tbl += '<td >' + data5 + '</td>';
tbl += '<td >' + data6 + '</td>';
tbl += '<td >' + data7 + '</td>';
tbl += '<td >' + data8 + '</td>';
tbl += '<td >' + data9 + '</td>';
tbl += '</tr>';
});
// window.location="display.jsp";
$("#textfiledata").html(tbl);
pageno = data.PAGENO;
totalpages = data.TOTALPAGES;
rowsperpage = data.ROWSPERPAGE;
enablePrevNext();
if(pageno == 1) {
$("#btnPrev").addClass("disabled");
} else if(pageno == totalpages) {
$("#btnNext").addClass("disabled");
}
$("#txtPage").val(pageno);
$('#lblTotalPages').html(totalpages);
}
else
{
alert("Error in displaying snomed info data");
return false;
}
},
error: function()
{
alert("Error in displaying snomed info data");
return false;
}
});
}
function Redirect() {
window.location="display.jsp";
display();
}
function om_nPageRefresh() {
location.reload();
}
//this is the 1st jsp with the display button in it
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/jquery-ui-1.8.17.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/jquery.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/encstyle.css" />
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.9.2.custom.min.js"></script>
<script type="text/javascript" src="js/textfileloadutility.js"></script>
</head>
<body>
<div class="blue-nav">
<div class="blue-pad">
<div class="dropdown referal-drop pull-left">
SNOMED CT Manual Mapping Load Utility
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="fileter-wrap">
<form class="form-horizontal" role="form">
<div style=text-align:center;margin:auto;>
<input class="btn btn-blue btn-sm btn-xs " id="clickMe" type="button" value="Load" onclick="check();" />
</div>
<div id="Message"></div>
</form>
<div class="clearfix spacer10"></div>
<div class="clearfix spacer10"></div>
</div>
<div class="fileter-wrap">
<label>Task status:</label>
<div style=text-align:center;margin:auto;>
<input style=text-align:center; id="click" type="submit" value="Display" onclick="Redirect();" />
</div>
</div>
</body>
</html>
//this is the 2nd jsp where the data is to be displayed
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/jquery-ui-1.8.17.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/jquery.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/encstyle.css" />
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.9.2.custom.min.js"></script>
<script type="text/javascript" src="js/textfileloadutility.js"></script>
</head>
<body>
<div class="blue-nav">
<div class="blue-pad">
<div class="dropdown referal-drop pull-left">
SNOMED CT Manual Mapping Load Utility
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="fileter-wrap">
<table class="table table-bordered grey-table nomargin" id="">
<thead>
<tr>
<th >ReferenceId</th>
<th >Id</th>
<th >Effective time</th>
<th >Active</th>
<th >Module id</th>
<th >Concept id</th>
<th >Language code</th>
<th >Type id</th>
<th >Term</th>
<th >CaseSignificanceid</th>
</tr>
</thead>
<tbody id="textfiledata">
</tbody>
</table>
<div class="clearfix spacer10"></div>
<div class="col-sm-15 cust-paged">
<div class="col-sm-5">
<button id="btnPrev" class="btn btn-lblue btn-xs" onclick="onClickPrev();">PREVIOUSPAGE</button>
<span>Page</span>
<input type="text" value="" class="search" id="txtPage" onkeydown="search(this)" >
<span>of <label id="lblTotalPages"></label></span>
<button id="btnNext" class="btn btn-lblue btn-xs" onclick="onClickNext();">NEXTPAGE</button>
</div>
</div>
<div class="clearfix spacer10"></div>
</div>
</body>
</html>
I have created 2 jsp pages.In the 1st jsp screen there is a button called "display".when i click this button the page should redirect to the 2nd jsp screen.
I was able to redirect to the 2nd jsp page using window.location() in javascript but the ajax call fails and goes to the error function(). When i click the display button it does not show any dynamic data that is appended to the 2nd jsp.(shows only static content).`
NOTE:if i create the display button in the 2nd jsp the data is getting displayed properly in the 2nd jsp itself.

getJSON script returning "undefined"

I have had a look around on here and a number of other sites for the correct way to create an HTML table from and external json link and have come up with the below.
I am trying to pull the username and number of votes and display them in the table, multiple rows are created, all populated with "undefined".
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link re="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<table class="table table-bordered table-striped table-hover" id="ragnarok_table">
<tr>
<th>Username</th>
<th>Votes</th>
</tr>
</table>
</div>
<script>
$(document).ready(function(){
$.getJSON("https://ark-servers.net/api/?object=servers&element=voters&key=[REMOVED]&month=current&format=json", function(data){
var ragnarok_data = '';
$.each(data, function(val){
ragnarok_data += '<tr>';
ragnarok_data += '<td>'+val.nickname+'</td>';
ragnarok_data += '<td>'+val.votes+'</td>';
ragnarok_data += '</tr>';
});
$('#ragnarok_table').append(ragnarok_data);
});
});
</script>
</body>
</html>
I can see that others have run into this issue too, however, this is my first time diving into Javascript; the other questions have completely different code and the answers dont seem to work here. Any help would be much appreciated, thanks.

Just use a .forEach on data.voters.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link re="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<table class="table table-bordered table-striped table-hover" id="ragnarok_table">
<tr>
<th>Username</th>
<th>Votes</th>
</tr>
</table>
</div>
<script>
$(document).ready(function() {
$.getJSON("https://ark-servers.net/api/?object=servers&element=voters&key=R72Uo7jcAXCVBjx1eGtDm8itWlrU59GHnuy&month=current&format=json", function(data) {
var ragnarok_data = '';
data.voters.forEach(function (val) {
ragnarok_data += '<tr>';
ragnarok_data += '<td>' + val.nickname + '</td>';
ragnarok_data += '<td>' + val.votes + '</td>';
ragnarok_data += '</tr>';
});
$('#ragnarok_table').append(ragnarok_data);
});
});
</script>
</body>
</html>
Or, if you are dead set on jQuery, modify your $.each to be on the array you want data from data.voters, and to properly get the value:
$.each(data.voters, function (ignore, val) {
The second argument is the value, the first argument is the index. See more here:
https://api.jquery.com/jQuery.each/

You can use .each as below:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link re="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<table class="table table-bordered table-striped table-hover" id="ragnarok_table">
<tr>
<th>Username</th>
<th>Votes</th>
</tr>
</table>
</div>
<script>
$(document).ready(function() {
$.getJSON("https://ark-servers.net/api/?object=servers&element=voters&key=R72Uo7jcAXCVBjx1eGtDm8itWlrU59GHnuy&month=current&format=json", function(data) {
var ragnarok_data = '';
/*data.voters.forEach(function (val) {
*/
$(jQuery.parseJSON(JSON.stringify(data.voters))).each(function() {
ragnarok_data += '<tr>';
ragnarok_data += '<td>' + this.nickname + '</td>';
ragnarok_data += '<td>' + this.votes + '</td>';
ragnarok_data += '</tr>';
});
$('#ragnarok_table').append(ragnarok_data);
});
});
</script>
</body>
</html>

How to show html tags from javascript variable to a div id?

I want to show the testTag variable to the div after i click the button. When i clicked it only shows the label of the option tag and not the full select tags.
Please help! This is my code.
function showDropdown() {
var textTag = "<select>";
var textOptions = ["option1","option2","option3"];
for (i = 0; i < textOptions.length; i++) {
textTag += '<options value="' + textOptions[i] + '">' + textOptions[i] + "</options>";
}
textTag += "</select>";
document.getElementById("dropdownTest").innerHTML= textTag;
console.log(textTag);
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Show dropdown</title>
</head>
<body>
<input type="button" id="showDrop" value="Show dropdown" onClick="showDropdown()">
<div id="dropdownTest"></div>
</body>
</html>

It's called <option>, not <options>:
function showDropdown() {
var textTag = "<select>";
var textOptions = ["option1","option2","option3"];
// declare "i"!
for (var i = 0; i < textOptions.length; i++) {
// change this line
textTag += '<option value="' + textOptions[i] + '">' + textOptions[i] + "</option>";
}
textTag += "</select>";
document.getElementById("dropdownTest").innerHTML = textTag;
console.log(textTag);
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Show dropdown</title>
</head>
<body>
<input type="button" id="showDrop" value="Show dropdown" onClick="showDropdown()">
<div id="dropdownTest"></div>
</body>
</html>

Develop Reference

JavaScript is the programming language of the Web.

Trying to remove the whole table row html javascript - javascript

Related

Loop only executes once/

" Uncaught TypeError: Cannot set properties of null"? whats wrong with document.getElementById('tmessage').innerHTML= message;?

ajax call goes to error function when i try to redirect from 1st jsp to 2nd jsp

getJSON script returning "undefined"

How to show html tags from javascript variable to a div id?

Categories

Resources