We Keep Coding

Why does removeChild remove every element instead of just one?

I'm having a very hard time adding HTML to a webpage the way I want to. I'm currently working on a resume creator webpage, but when I click the remove school button while more than 2 schools are listed, the associated javascript removes every school except for the first one. The removeChild function is not working as it is supposed to. My code is listed below. Specifically, if you run the code, then click add school twice, and then click remove school, it will remove Schools 2 and 3, while it should only remove school 3. So something is wrong with my removeSchool function I would think. But nothing is wrong as far as I can tell.
Also, if anyone has any idea of a better way of doing what I'm trying to do, please let me know.
const schools = document.getElementById("schools");
var num_schools = 1;
var add_school_button = `<button id="addschool" onclick="addSchool();">Add School</button>`;
var remove_school_button = `<button id="removeschool" onclick="removeSchool();">Remove School</button>`;
var new_school_html = `<table id="school[]">
<tr>
<td colspan="2" align="center">School []</td>
</tr>
<tr>
<td><label for="schoolname[]">School Name: </label></td><td><input type="text" id="schoolname[]" size="50" /></td>
</tr>
<tr>
<td><label for="schoollocation[]">Location: </label></td><td><input type="text" id="schoollocation[]" size="50" /></td>
</tr>
<tr>
<td><label for="schoolyear[]">Year Graduated: </label></td><td><input type="text" id="schoolyear[]" size="50" /></td>
</tr>
<tr>
<td><label for="schooldegree[]">Degree Earned: </label></td><td><input type="text" id="schooldegree[]" size="50" /></td>
</tr>
</table>`;
function addSchool() {
schools.removeChild(document.getElementById("addschool"));
if (num_schools > 1) {
schools.removeChild(document.getElementById("removeschool"));
}
num_schools++;
schools.innerHTML += new_school_html.replace(/\[\]/g, num_schools.toString());
schools.innerHTML += add_school_button;
schools.innerHTML += remove_school_button;
}
function removeSchool() {
schools.removeChild(document.getElementById("school" + num_schools.toString()));
num_schools--;
if (num_schools == 1) {
schools.removeChild(document.getElementById("removeschool"));
}
}
div {
border: 1px solid black;
}
.maincol {
width: 50%;
}
.maincol>* {
margin-left: 20px;
}
.maincol>h2 {
margin-left: 0px;
}
#schools>table {
margin-bottom: 20px;
}
<h1>Resume Creator</h1>
<form>
<div class="maincol">
<h2>Identifying Information</h2>
<table>
<tr>
<td><label for="name">Full Name: </label></td>
<td><input type="text" id="name" name="name" size="50" /></td>
</tr>
<tr>
<td><label for="address">Address: </label></td>
<td><input type="text" id="address" name="address" size="50" /></td>
</tr>
<tr>
<td><label for="email">Email Address: </label></td>
<td><input type="text" id="email" name="email" size="50" /></td>
</tr>
<tr>
<td><label for="phone">Phone Number: </label></td>
<td><input type="text" id="phone" name="phone" size="50" /></td>
</tr>
</table>
</div>
<div class="maincol">
<h2>Skills</h2>
<p>Enter a comma-separated list of skills. E.g. Guest Services, Loss Prevention, Product Promotion, Etc.</p>
<textarea id="skill_list" rows=4 cols=90></textarea>
</div>
<div class="maincol">
<h2>Education</h2>
<div id="schools">
<table id="school1">
<tr>
<td colspan="2" align="center">School 1</td>
</tr>
<tr>
<td><label for="schoolname1">School Name: </label></td>
<td><input type="text" id="schoolname1" size="50" /></td>
</tr>
<tr>
<td><label for="schoollocation1">Location: </label></td>
<td><input type="text" id="schoollocation1" size="50" /></td>
</tr>
<tr>
<td><label for="schoolyear1">Year Graduated: </label></td>
<td><input type="text" id="schoolyear1" size="50" /></td>
</tr>
<tr>
<td><label for="schooldegree1">Degree Earned: </label></td>
<td><input type="text" id="schooldegree1" size="50" /></td>
</tr>
</table>
<button id="addschool" onclick="addSchool();">Add School</button>
</div>
</div>
</form>

I's thinking of using DOM remove method instead of removeChild method. Since you are already using getElementById so remove will do just fine.
function removeSchool() {
document.getElementById("school" + num_schools.toString()).remove(); // here changed removeChild method to remove
num_schools--;
if (num_schools == 1) {
document.getElementById("removeschool").remove(); // here changed removeChild method to remove
}
}
Remove DOM Element

IDs must be unique
Use type="button" or use preventDefault (you are submitting your form now on each click)
Delegate
Using
<button type="button" class="addschool">
<button type="button" class="removeschool">
and
document.getElementById("schools").addEventListener("click",function(e) {
const tgt = e.target;
if (tgt.classList.contains("removeschool")) {
tgt.closest("table").remove();
}
else if (tgt.classList.contains("addschool")) addSchool();
})
Also look into
clone templates
Here is a clone example. I renumber the schools whenever I add or remove one
I moved the add outside schools and remove to the header
const schools = document.getElementById("schools");
const firstSchool = document.getElementById("school1");
const renum = () => schools.querySelectorAll(".num").forEach((school,i) => school.innerText = (i+1))
function addSchool() {
const newSchool = firstSchool.cloneNode(true);
newSchool.querySelector(".removeschool").removeAttribute("hidden")
schools.appendChild(newSchool)
renum()
}
schools.addEventListener("click", function(e) {
const tgt = e.target;
if (tgt.classList.contains("removeschool")) {
tgt.closest("table").remove();
renum()
}
})
document.getElementById("addschool").addEventListener("click",addSchool);
div {
border: 1px solid black;
}
.maincol {
width: 50%;
}
.maincol>* {
margin-left: 20px;
}
.maincol>h2 {
margin-left: 0px;
}
#schools>table {
margin-bottom: 20px;
}
<h1>Resume Creator</h1>
<form>
<div class="maincol">
<h2>Identifying Information</h2>
<table>
<tr>
<td><label for="name">Full Name: </label></td>
<td><input type="text" id="name" name="name" size="50" /></td>
</tr>
<tr>
<td><label for="address">Address: </label></td>
<td><input type="text" id="address" name="address" size="50" /></td>
</tr>
<tr>
<td><label for="email">Email Address: </label></td>
<td><input type="text" id="email" name="email" size="50" /></td>
</tr>
<tr>
<td><label for="phone">Phone Number: </label></td>
<td><input type="text" id="phone" name="phone" size="50" /></td>
</tr>
</table>
</div>
<div class="maincol">
<h2>Skills</h2>
<p>Enter a comma-separated list of skills. E.g. Guest Services, Loss Prevention, Product Promotion, Etc.</p>
<textarea id="skill_list" rows=4 cols=90></textarea>
</div>
<div class="maincol">
<h2>Education</h2>
<div id="schools">
<table id="school1">
<tr>
<td colspan="2">School <span class="num">1</span><span style="float:right"><button type="button" hidden class="removeschool" >Remove</button></span></td>
</tr>
<tr>
<td><label for="schoolname1">School Name: </label></td>
<td><input type="text" id="schoolname1" size="50" /></td>
</tr>
<tr>
<td><label for="schoollocation1">Location: </label></td>
<td><input type="text" id="schoollocation1" size="50" /></td>
</tr>
<tr>
<td><label for="schoolyear1">Year Graduated: </label></td>
<td><input type="text" id="schoolyear1" size="50" /></td>
</tr>
<tr>
<td><label for="schooldegree1">Degree Earned: </label></td>
<td><input type="text" id="schooldegree1" size="50" /></td>
</tr>
</table>
</div>
<button type="button" id="addschool">Add School</button>
</div>
</form>

You need to specify for each button type = "button" so that it doesn't reload the page every time you press it. Like so :
<button id="removeschool" type = "button" onclick="removeSchool();">Remove School</button>.
Although I would suggest you put your buttons outside the table so that you don't have to add them with javascript every time you add/delete a school. (for the delete button just hide it when you have only one school and display it when you have multiple schools).
Also I think its better in the future to use classes instead of just adding plain strings to the HTML body. Your code would be cleaner and easier to edit.

Change value of input in sibling hidden TD

When my delete button is clicked I would like to change the value of the "is_active" input that has the class of 'active' value from "yes" to "no".
So far I tried to using siblings to try and select the input with the class of 'active'. No luck.
Here is my code:
<script type="text/javascript">
$(document).on("click", ".delete", function(){
if ($(this).parents('.idcheck').length){
$(this).siblings("td").next().find('.active').val('no');
$(this).parents("tr").hide();
}
else
{$(this).parents("tr").remove();
}
$(".add-new").removeAttr("disabled");
});
</script>
<table class="table table-bordered">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>County</th>
<th>Street</th>
<th>City</th>
<th>Ward</th>
<th>Precinct</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<form id="" class="form" name="parts" method="post" action="">
<tr class="idcheck">
<td style="display:none;"><input type="hidden" class="form-control" name="username" id="username" value="user"></td>
<td><input type="text" class="form-control" name="first_name" id="first_name" value="John"></td>
<td><input type="text" class="form-control" name="last_name" id="last_name" value="Doe"></td>
<td><input type="text" class="form-control" name="county" id="county" value="my county"></td>
<td><input type="text" class="form-control" name="street" id="street" value="456 easy street"></td>
<td><input type="text" class="form-control" name="city" id="city" value="town"></td>
<td><input type="text" class="form-control" name="ward" id="ward" value="5"></td>
<td><input type="text" class="form-control" name="precinct" id="precinct" value="2"></td>
<td style="display:none;"><input type="hidden" class="form-control" name="id" id="id" value="1"></td>
<td style="display:none;"><input type="hidden" class="form-control active" name="is_active" id="is_active" value="yes"></td>
<td><a class="delete" title="" data-toggle="tooltip" data-original-title="Delete"><i class="material-icons"></i></a>
</td>
</tr>
</tbody>
</table>

I figured it out, here is the updated code:
<script type="text/javascript">
$(document).on("click", ".delete", function(){
if ($(this).parents('.idcheck').length){
$(this).closest('tr').find('.active').val('no');
$(this).parents("tr").hide();
}
else
{$(this).parents("tr").remove();
}
$(".add-new").removeAttr("disabled");
});
</script>
<table class="table table-bordered">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>County</th>
<th>Street</th>
<th>City</th>
<th>Ward</th>
<th>Precinct</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<form id="" class="form" name="parts" method="post" action="">
<tr class="idcheck">
<td style="display:none;"><input type="hidden" class="form-control" name="username" id="username" value="user"></td>
<td><input type="text" class="form-control" name="first_name" id="first_name" value="John"></td>
<td><input type="text" class="form-control" name="last_name" id="last_name" value="Doe"></td>
<td><input type="text" class="form-control" name="county" id="county" value="my county"></td>
<td><input type="text" class="form-control" name="street" id="street" value="456 easy street"></td>
<td><input type="text" class="form-control" name="city" id="city" value="town"></td>
<td><input type="text" class="form-control" name="ward" id="ward" value="5"></td>
<td><input type="text" class="form-control" name="precinct" id="precinct" value="2"></td>
<td style="display:none;"><input type="hidden" class="form-control" name="id" id="id" value="1"></td>
<td style="display:none;"><input type="hidden" class="form-control active" name="is_active" id="is_active" value="yes"></td>
<td><a class="delete" title="" data-toggle="tooltip" data-original-title="Delete"><i class="material-icons"></i></a>
</td>
</tr>
</tbody>
</table>
I changed the line from :
$(this).siblings("td").next().find('.active').val('no');
To this:
$(this).closest('tr').find('.active').val('no');

Hide/Display Form Section

I have a table in which five fields have upload rows.Each time, I submit a row,the pages refreshes. However, I want to hide all the 4 rows, when the first submit button is clicked, then it should show the next row, and hide the previous row. This should continue till the last one. I have tried the following, but not working. ie all the rows are displaying. I need assitance on how to achieve this feat.
<script>
$("#othBtn1").click(function(){
$("#oth2").show();
$("#oth1").hide();
$("#oth3").hide();
$("#oth4").hide();
$("#oth5").hide();
});
$("#othBtn2").click(function(){
$("#oth3").show();
$("#oth1").hide();
$("#oth2").hide();
$("#oth4").hide();
$("#oth5").hide();
});
</script>
This will continue till the last button. See the HTML below:
<table width="96%" border="0" style="margin-top:10px;" align="left" id="tableRec"class="table table-bordered">
<tr id="oth1">
<th width="26%">Other Request (1):<small> (Attachment Required) <i> Attach each other request per line</i></small></th>
<td width="33%">Description:<input type="text" name="tdesc1" value="" placeholder="Enter the Description" class="form-control"></td><td width="12%">Amount:<input type="text" name="tamt1" value="" placeholder="Enter Amount and click Add to Request Button" class="form-control" /></td>
<td>File(1):<input type="file" name="jfile1"/></td>
<td width="29%"><input type="submit" name="othBtn1" id="othBtn1" value="Add to Request" class="btn btn-success" /> </td>
</tr>
<tr id="oth2">
<th width="26%">Other Request (2):<small> (Attachment Required) <i> Attach each other request per line</i></small></th>
<td width="33%">Description:<input type="text" name="tdesc2" value="" placeholder="Enter the Description" class="form-control"></td><td width="12%">Amount:<input type="text" name="tamt2" value="" placeholder="Enter Amount and click Add to Request Button" class="form-control" /></td>
<td>File(2):<input type="file" name="jfile2"/></td>
<td width="29%"><input type="submit" name="othBtn2" id="othBtn2" value="Add to Request" class="btn btn-success" /></td>
</tr>
<tr id="oth3">
<th width="26%">Other Request (3):<small> (Attachment Required) <i> Attach each other request per line</i></small></th>
<td width="33%">Description:<input type="text" name="tdesc3" value="" placeholder="Enter the Description" class="form-control"></td><td width="12%">Amount:<input type="text" name="tamt3" value="" placeholder="Enter Amount and click Add to Request Button" class="form-control" /></td>
<td>File(3):<input type="file" name="jfile3"/></td>
<td width="29%"><input type="submit" name="othBtn3" id="othBtn3" value="Add to Request" class="btn btn-success" /> </td>
</tr>
<tr id="oth4">
<th width="26%">Other Request (4):<small> (Attachment Required) <i> Attach each other request per line</i></small></th>
<td width="33%">Description:<input type="text" name="tdesc4" value="" placeholder="Enter the Description" class="form-control"></td><td width="12%">Amount:<input type="text" name="tamt4" value="" placeholder="Enter Amount and click Add to Request Button" class="form-control" /></td>
<td>File(4):<input type="file" name="jfile4"/></td>
<td width="29%"><input type="submit" name="othBtn4" id="othBtn4"value="Add to Request" class="btn btn-success" /> </td>
</tr>
<tr id="oth5">
<th width="26%">Other Request (5):<small> (Attachment Required) <i> Attach each other request per line</i></small></th>
<td width="33%">Description:<input type="text" name="tdesc5" value="" placeholder="Enter the Description" class="form-control"></td><td width="12%">Amount:<input type="text" name="tamt5" value="" placeholder="Enter Amount and click Add to Request Button" class="form-control" /></td>
<td>File(5):<input type="file" name="jfile5"/></td>
<td width="29%"></td>
</tr>
</table>

You have a couple of issues.
You are missing a opening bracket for your table <.
You are missing the # in your selector.
Change,
table width="96%" border="0" style="margin-top:10px;" align="left" id="tableRec"class="table table-bordered">
to,
<table width="96%" border="0" style="margin-top:10px;" align="left" id="tableRec"class="table table-bordered">
and change,
$("#othBtn1").click(function() {
$("#oth2").show();
$("oth1").hide();
$("oth3").hide();
$("oth4").hide();
$("oth5").hide();
});
$("#othBtn2").click(function() {
$("#oth3").show();
$("oth1").hide();
$("oth2").hide();
$("oth4").hide();
$("oth5").hide();
});
to,
$("#othBtn1").click(function() {
$("#oth2").show();
$("#oth1").hide();
$("#oth3").hide();
$("#oth4").hide();
$("#oth5").hide();
});
$("#othBtn2").click(function() {
$("#oth3").show();
$("#oth1").hide();
$("#oth2").hide();
$("#oth4").hide();
$("#oth5").hide();
});

In your example you missed the # in front of the id selectors.
And you can simple combine everything to a single event listener. No need for doing it manually for each button.
$("#tableRec input[id^=othBtn]").click(function() {
$("#tableRec tr").hide();
$(this).closest("tr").next().show();
});
tr {
display: none;
}
tr:first-child {
display: table-row;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tableRec">
<tr>
<td>1</td>
<td><input type="submit" id="othBtn1" value="Add to Request" /></td>
</tr>
<tr>
<td>2</td>
<td><input type="submit" id="othBtn2" value="Add to Request" /></td>
</tr>
<tr>
<td>3</td>
<td><input type="submit" id="othBtn3" value="Add to Request" /></td>
</tr>
<tr>
<td>4</td>
<td><input type="submit" id="othBtn4" value="Add to Request" /></td>
</tr>
<tr>
<td>5</td>
<td>table end</td>
</tr>
</table>

Change Button Text

I am learning php and want to set the display text for a button that I have. I know that you can use javascript to change the button text,but that (at least from what I have seen) works for .onclick I want the button text to be changed when the page loads. By default the button text on my page when it loads displays Submit Query when my page loads I want the text to read Button on Page
Is there a way using php to 1) set the button text and 2) have it span 2 rows in the table?
This is the code I am working with:
<html>
<body>
<form id="TestForm" runat="server">
<div>
<div id="calculationfields">
<table id="calculations">
<tr>
<td><label for="lblreadonly1:">Read Only 1:</label></td>
<td><input type="text" name="txtReadOnly1" maxlength="50" size="10" readonly></td>
</tr>
<tr>
<td><label for="lblreadonly2:">Read Only 2:</label></td>
<td><input type="text" name="txtReadOnly2" maxlength="50" size="10" readonly></td>
</tr>
<tr>
<td><label for="lblreadonly3:">Read Only 3:</label></td>
<td><input type="text" name="txtreadonly3" maxlength="50" size="10" readonly></td>
</tr>
<tr>
<td rowspan="2"><input type="submit" name="btn123" text="Button On Page"></td>
</tr>
</table>
</div>
</div>
</form>
</body>
</html>

You should use value instead of text for your submit button
<body>
<form id="TestForm" runat="server">
<div>
<div id="calculationfields">
<table id="calculations">
<tr>
<td><label for="lblreadonly1:">Read Only 1:</label></td>
<td><input type="text" name="txtReadOnly1" maxlength="50" size="10" readonly></td>
</tr>
<tr>
<td><label for="lblreadonly2:">Read Only 2:</label></td>
<td><input type="text" name="txtReadOnly2" maxlength="50" size="10" readonly></td>
</tr>
<tr>
<td><label for="lblreadonly3:">Read Only 3:</label></td>
<td><input type="text" name="txtreadonly3" maxlength="50" size="10" readonly></td>
</tr>
<tr>
<td colspan="2"><input type="submit" name="btn123" value="<?php echo 'Button On Page'; ?>" style="width:100%"></td>
</tr>
</table>
</div>
</div>
</form>
</body>

If you always know what you want your button to say, you don't need php or javascript. You can just use the html "value" attribute. You are incorrectly using a attribute labled "text", you should use "value". Update your code to the following.
Change your button html from:
<input type="submit" name="btn123" text="Button On Page">
To:
<input type="submit" name="btn123" value="Button On Page">
Edit:
In order to have your button go full width. You should use "colspan" instead of "rowspan". Your td is in a row, and needs to span columns.
Change this code from:
<td rowspan="2"><input type="submit" name="btn123" value="Button On Page"></td>
to (note that I added an id of "button" to your button):
<td rowspan="2"><input type="submit" id="button" name="btn123" value="Button On Page"></td>
Then add a little css:
#button{
width: 100%;
}
Here is a fiddle with a working example:
https://jsfiddle.net/joeydehnert/m1ttcr86/

how to do dynamic divs - expand collapse loop

I need a function that allows my client to add more divs on the form or not, clicking on a button (+) for example, like a loop
this loop should repet divs and the button to add more divs, like bellow on the pic
does anybody has an ideia of how to do it?
is expand collapse the best way of doing it?
Thank you very much!

I am not certain what is your desire so I post both options:
If you want to expand hidden existing fields and asuming you can use JQUery:
<table>
<tr>
<th>Field1</th>
<td><input type="text" value="" /></td>
</tr>
<tr>
<th>Field2</th>
<td><input type="text" value="" /></td>
</tr>
<tr class="hiddenarea" style="display: none;">
<th>Field3 (Hidden)</th>
<td><input type="text" value="" /></td>
</tr>
</table>
<input id="show_hide" value="Collapse/Expand" />
<script type="text/javascript">
$("#show_hide").click(function() {
$(".hiddenarea").toggle();
});
</script>
///////////////////////////////////
The second solution to add a new line to the table is:
<table id="mytable">
<tr>
<th>Field1</th>
<td><input type="text" value="" /></td>
</tr>
<tr>
<th>Field2</th>
<td><input type="text" value="" /></td>
</tr>
</table>
<input id="show_hide" value="Collapse/Expand" />
<script type="text/javascript">
$("#show_hide").click(function() {
$("#mytable").append('<tr><td>New field</td><td><input type="text" value="" /></td></tr>');
});
</script>