We Keep Coding

Javascript HTML how to remove a Div Element duplicated by an onClick event

I am having trouble deleting an element which was duplicated by an onClick event.
Firstly, please don't rage at my IDs....the page is a mess right now.
I have a div element that appears after a radio button is selected.
The Radio Buttons I have created:
<div class="wrapper">
<input type="radio" onclick="yesnoCheck();" name="select" id="option-1">
<input type="radio" onclick="yesnoCheck();" name="select" id="option-2" checked>
<label for="option-1" class="option option-1"><span>Yes</span></label>
<label for="option-2" class="option option-2"><span>No</span></label>
</div>
In this div element is a form.
<div class="basicInfoContainer">
<div class="basicInfoItemTitle"><h3>Full Name</h3></div>
<div class="basicInfoItem"><input type="text" id="fNames" name="Full Names" placeholder="John Doe" size="50"></div>
<div class="basicInfoItemTitle"><h3>Site Name</h3></div>
<div class="basicInfoItem"><input type="text" id="sName" name="Site Name" placeholder="ABC" size="50"></div>
<div class="basicInfoItemTitle"><h3>Site Address</h3></div>
<div class="basicInfoItem"><input type="text" id="sAddress" name="Site Address" placeholder="123 Story Street" size="50"></div>
<div class="basicInfoItemTitle"><h3>Branch</h3></div>
<div class="basicInfoItem">
<select name="Branch" id="branch" aria-placeholder="Select a Branch">
<option value="" disabled selected>Select a Branch...</option>
<option value="Pretoria">Option1</option>
<option value="Midrand">Option2</option>
</select></div>
</div>
<button class="addItem" value="Add Item" id="addItem" onclick = "duplicate()" style="display: none;"><label for="addItem">Add Item</label></button>
This form shows once I press the Yes radio button:
function yesnoCheck() {
if (document.getElementById("option-1").checked) {
document.getElementById("ifYes").style.display = 'block';
document.getElementById("addItem").style.display = "block";
} else {
document.getElementById("ifYes").style.display = 'none';
document.getElementById("addItem").style.display = "none";
}
};
I then duplicate the form using:
var i = 0;
var original = document.getElementById('ifYes');
function duplicate() {
var clone = original.cloneNode(true);
clone.id = "ifYes" + ++i;
original.parentNode.appendChild(clone);
}
My question is, when I press No On the Radio Buttons, I want all those duplicated div elements to be removed.
Right now, only the one ,coded in the HTML gets removed. Not the elements created by JS.

So I managed to fix it.
The altered code lies below:
function yesnoCheck() {
if (document.getElementById("option-1").checked) {
document.getElementById("ifYes").style.display = 'block';
document.getElementById("addItem").style.display = "block";
} else {
document.getElementById("ifYes").style.display = 'none';
document.getElementById("addItem").style.display = "none";
};
if(document.getElementById("option-2").checked){
var removeEquipment= document.getElementById("ifYes0");
removeEquipment.remove();
}
}
function duplicate() {
var clone = original.cloneNode(true);
clone.id = "ifYes" + i;
original.parentNode.appendChild(clone);
}
By no means efficient, but I got around it by not adding var i up the whole time. Once I press "Add Item", each time it will clone the div element with ID ifYes0.
Then I made a var for ifYes0 and then it removes all additional ones.
I don't care about data retention in those forms that are deleted, but if I need to, in future I might just set those display to none, instead.

Disable select element on specific radio button check

I'm trying to disable the "select" when "color1,color2 and color3" button is selected. And I wanted to enable it when the "color4" radio button was checked. I went to different resources and got confused how to put it in my codes.
here's my HTML:
<br> <input type="radio" id="color1" name="color" value="orange" onchange="display()" />
<br> <input type="radio" id="color2" name="color" value="white" onchange="display()" />
<br> <input type="radio" id="color3" name="color" value="red" onchange="display()" />
// when checked, the select must be enable
<br> <input type="radio" id="color4" name="color" value="other" onchange="display()" />
<select id="other_color" onchange="display()" />
<option value="black">black</option>
<option value="pink">pink</option>
<option value="green">Green</option> </select>
<div id="color_display" height="100px" width="100px"></div>
Now for my Js:
function display(){
if(document.getElementById('color1').checked){
document.getElementById('color_display').innerHTML = " Orange"; }
if(document.getElementById('color2').checked){
document.getElementById('color_display').innerHTML = " White"; }
if(document.getElementById('color3').checked){
document.getElementById('color_display').innerHTML = " Red"; }
if (document.getElementById('other_color').value == black') {
document.getElementById('color_display').innerHTML = " Black"; }
if (document.getElementById('other_color').value == 'pink') {
document.getElementById('color_display').innerHTML = " Pink"; }
if (document.getElementById('other_color').value == 'green') {
document.getElementById('color_display').innerHTML = " Green";}
}
I haven't include the "color4" since it won't display anything, I want it to trigger to enable the selection.
Should I change or create another JS for checking? I'm not sure where to start.

From what I understood.
You can make the following changes in your JS code.
document.getElementById("other_color").disabled = true;//disabling the select tag initially;
function display() {
if (document.getElementById('color1').checked) {
document.getElementById('color_display').innerHTML = " Orange";
}
if (document.getElementById('color2').checked) {
document.getElementById('color_display').innerHTML = " White";
}
if (document.getElementById('color3').checked) {
document.getElementById('color_display').innerHTML = " Red";
}
if (document.getElementById('color4').checked) {
document.getElementById('other_color').disabled = false;//enable the select tag when the radio 4th radio gets checked
if (document.getElementById('other_color').value == 'black') {
document.getElementById('color_display').innerHTML = " Black";
}
if (document.getElementById('other_color').value == 'pink') {
document.getElementById('color_display').innerHTML = " Pink";
}
if (document.getElementById('other_color').value == 'green') {
document.getElementById('color_display').innerHTML = " Green";
}
}
}

please change your js like that.
function display() {
if (document.getElementById('color4').checked) {
document.getElementById("other_color").disabled = true;
}
else{
document.getElementById("other_color").disabled = false;
}
}

Based on your post and the information I deduce from your comment on your initial post and answers, I thing you are trying to achieve what I've replicated in the spinet below:
Instead of showing the select option by default, hide it so as to only show it when the color4 radio button is select so as to make it more user friendly for an improved User Experience.
var color = document.querySelectorAll('input[name="color"]'),
displaySelectedColour = document.getElementById("color_display"),
selectOption = document.getElementById("other_color");
for (var i in color) {
color[i].onclick = function() {
if (document.getElementById('color1').checked == true) {
displaySelectedColour.style.display = "block";
displaySelectedColour.innerText = "Orange";
selectOption.style.display = "none";
}
if (document.getElementById('color2').checked == true) {
displaySelectedColour.style.display = "block";
displaySelectedColour.innerText = "White";
selectOption.style.display = "none";
}
if (document.getElementById('color3').checked == true) {
displaySelectedColour.style.display = "block";
displaySelectedColour.innerText = "Red";
selectOption.style.display = "none";
}
if (document.getElementById('color4').checked == true) {
displaySelectedColour.style.display = "none";
selectOption.style.display = "block";
}
};
}
<input type="radio" id="color1" name="color" value="orange">
<br><input type="radio" id="color2" name="color" value="white">
<br><input type="radio" id="color3" name="color" value="red">
<br><input type="radio" id="color4" name="color" value="other">
<!-- Select disabled by default and enabled only on color4 radio button check -->
<br>
<select id="other_color" style="display: none;">
<option disabled selected value>-- Select one --</option>
<option>black</option>
<option>pink</option>
<option>green</option>
</select>
<div id="color_display" height="100px" width="100px"></div>

How do I make radio button hidden until a option is selected in dropdown?

When a option is selected in drop down it shows data from mysql and I need it to be selectable. So I made a radio button but I need it to appear after option is selected but instead it is always there.

Let your radiobuttons div have the id of "radio_div" and your select - "select_options", then:
document.getElementById('select_options').addEventListener('change', function () {
document.getElementById('radio_div').style.display = 'block';
});

Not sure if I understand, but something like this?
http://jsfiddle.net/zysrcndx/
HTML:
<select id="show">
<option value="no" selected="selected">not showing</option>
<option value="yes">showing</option>
</select>
<div id="radio" style="display: none;">
<input type="radio" name="radio" value="something">Something<br>
<input type="radio" name="radio" value="somethingelse">Something Else
</div>
JavaScript:
var dd = document.getElementById('show');
var r = document.getElementById('radio');
dd.addEventListener('change', function () {
if(dd.options[dd.selectedIndex].value == 'no') {
r.style.display = 'none';
} else {
r.style.display = 'block';
}
});

Javascript causing form to break in IE

Objective: Understand a Javascript related IE compatibility problem.
Question: Why does my Javascript break in IE and nowhere else (besides "IE sucks," haha) and is there an easy fix.
Details: I have a payment system that allows the user to select between 3 payment methods (via html radio buttons) and uses Javascript to display the appropriate form to complete payment. In chorme and firefox it works perfectly.
In IE however, once the initial radio button is clicked and the Javascript displays the appropriate div the cursor jumps to the lower middle of the page and the user cannot click on any of the input boxes in the form.
The boxes can be reached if the user right clicks on them, but not easily. There are a variety of ways I can get around this, but I'm trying to understand what causes the problem in IE. Especially if it's poor coding on my part. Also, if there is an easy fix to the existing code I'd be interested in hearing it.
index.phtml
<form name="payo" action="/paymentAction/" method="post" >
<div id="tabs">
<div id="nav">
<input type="radio" name="tab" class="div1" value="Inv" /> Invoice <input type="radio" name="tab" class="div2" value="CC" /> Credit Card <input type="radio" name="tab" class="div3" value="Cpn"/> Coupon
</div>
<div id="div1" class="tab">
<!-- INVOICE TEXT -->
</div>
<div id="div2" class="tab">
<!-- CREDIT CARD FORM -->
Credit Card Number: <input type=text name="CardNo" placeHolder="Credit Card Number" value="" maxlength="16">
Expiration Month / Year: <font color="red">* </font>
<select name="ExpMonth">
<option value=""selected>mm</option>
<option >01</option>
<option >02</option>
<option >03</option>
</select>
<select name ="ExpYear">
<option value=""selected>yy</option>
<option >12</option>
<option >13</option>
<option >14</option>
</select>
Street Address Associated With Card: <input type=text name="Address" placeHolder="Address" value="">
</div>
<div id="div3" class="tab">
<!-- COUPON FORM -->
Coupon Code:
<input type="text" name="cpA" size=4 maxlength=4 > -
<input type="text" name="cpnB" size=6 maxlength=6> -
<input type="text" name="cpnC" size=5 maxlength=5>
<br />
</div>
<script type="text/javascript" charset="utf-8">
(function(){
var tabs =document.getElementById('tabs');
var nav = tabs.getElementsByTagName('input');
function hideTabs(){
document.getElementById('div1').style.display = "none";
document.getElementById('div2').style.display = "none";
document.getElementById('div3').style.display = "none";
}
function showTab(tab){
document.getElementById(tab).className = 'tab';
}
hideTabs();
for(var i=0;i<nav.length;i++){
nav[i].onclick = function(){
hideTabs();
var radios = document.getElementsByName('tab');
for (var i = 0, length = radios.length; i < length; i++) {
if (radios[i].checked) {
var here = i;
}
}
if (radios[here].value == "Inv") {
document.getElementById('div1').style.display = "block";
} else if(radios[here].value == "CC") {
document.getElementById('div2').style.display = "block";
} else if(radios[here].value == "Cpn") {
document.getElementById('div3').style.display = "block";
} else {
}
}
}
})();
</script>
<div id="formdiv">
<center><input type=submit name="submit" class="ButtonMain" value=" Authorize Payment "></center>
<br />
</div>
</form>
</div>

You fetch all inputs including the form inputs (card number et al.):
var nav = tabs.getElementsByTagName('input');
Then you assign an onclick to each the first act of which is to hide the tabs then reshow them, so whenever any input is clicked focus is lost immediately.
Chrome will not do anything noticeable & restores the elements focus, IE will reset it so the element effectively becomes uncapturable.
You need to only manage changing tabs when the radio button is clicked;
var radios = document.getElementsByName('tab');
for(var i=0;i<radios.length;i++){
radios[i].onclick = function(){

The issue looks like the line:
var nav = tabs.getElementsByTagName('input');
nav includes not just the radio buttons, but also the text input boxes as well, so when you attach the onclick function to all elements of the nav array it's causing the problem you see with the cursor jumping around. Quickest and easiest solution would be to limit it only to the radio buttons within the div id="nav" element:
var nav = document.getElementById('nav').getElementsByTagName('input');
Not required to fix the problem, but you can also simplify the javascript a little, since radios is not necessary anymore. Inside the onclick function, this will refer to the radio button clicked, so you can simplify:
nav[i].onclick = function(){
hideTabs();
var radios = document.getElementsByName('tab');
for (var i = 0, length = radios.length; i < length; i++) {
if (radios[i].checked) {
var here = i;
}
}
if (radios[here].value == "Inv") {
document.getElementById('div1').style.display = "block";
} else if(radios[here].value == "CC") {
document.getElementById('div2').style.display = "block";
} else if(radios[here].value == "Cpn") {
document.getElementById('div3').style.display = "block";
} else {
}
}
to:
nav[i].onclick = function(){
hideTabs();
if (this.value == "Inv") {
document.getElementById('div1').style.display = "block";
} else if(this.value == "CC") {
document.getElementById('div2').style.display = "block";
} else if(this.value == "Cpn") {
document.getElementById('div3').style.display = "block";
}
};

Hiding and disabling elements based on a combobox's value with JavaScript

I have a page where, depending on whether the value of a combobox is false (no), an input box should be hidden and a fieldset disabled. When the combobox's value changes to true (yes), the form should show the input box and enable the fieldset.
This is what I have so far:
<html>
<head>
<title>combo</title>
<script language="javascript">
function ToggleDisplay(Section, boolHide) {
if (boolHide == true) {
Section.style.display = "none";
}
else {
Section.style.display = "";
}
}
function disableElement(element, boolHide)
{
var input =
document.getElementById(element).getElementsByTagName("input");
for(var i = 0; i < input.length; i++)
{
input[i].setAttribute("disabled",boolHide);
}
}
function hideShowElement(CurrentSection, OtherSection, DisableSection)
{
var sectionVal = CurrentSection.value;
if (sectionVal == 0) {
ToggleDisplay(OtherSection, true);
//disableGroup (this.form, 'Radio1' , true);
disableElement(DisableSection, "true");
}
else {
ToggleDisplay(OtherSection, false);
//disableGroup (this.form, 'Radio1' , true);
disableElement(DisableSection, "false");
}
}
</script>
</head>
<body>
<form name="testForm" action="" method="post">
Show Hidden Text? <select name="cmbYN"
onchange="hideShowElement(this, MyDIV, 'OptionGrp1');">
<option value="0" selected="selected"></option>
<option value="1">Yes</option>
<option value="0">No</option>
</select>
<div id="MyDIV" style="display: none">
My Hidden Text: <input name="Text1" type="text" />
<br>
</div>
<fieldset id="OptionGrp1" name="Group1">
Option Group<br><br>
Option 1<input name="Radio1" type="radio" checked>
Option 2<input name="Radio1" type="radio">
</fieldset>
</form>
</body>
</html>
This is hiding the input box and disabling the fieldset, but not re-enabling them.

You should change the display back to what it was before, normally block.
if (boolHide){
Section.style.display = "none";
}else {
Section.style.display = "block";
}
Also for the disabled, the proper way is setting the disabled attribute to disabled and removing it afterwards:
for(var i = 0; i < input.length; i++)
{
if(boolHide){
input[i].setAttribute("disabled", "disabled");
}else{
input[i].removeAttribute("disabled");
}
}