Carl Jan Binalla Carl Jan Binalla - 1 month ago 12
HTML Question

Extra <br/>s are appearing even when I remove them by looping and removeChild()

As the title states, I can't seem to find the suspect for this behaviour.

Here's my script:

function myFunction() {
var marriedInputs = document.getElementById("marriedInputs");
var status = document.getElementById("maritalStatusList").value;
if (status == "Married") {
var breaks = marriedInputs.getElementsByTagName("BR");
for (var i = 0; i < breaks.length; i++) {
marriedInputs.removeChild(breaks[i]);
}
var spouseLabel = document.createElement("LABEL");
spouseLabel.setAttribute("id", "spouseLabelID");
spouseLabel.for = document.getElementById("spouseLname");
var spouseLabelText = document.createTextNode("SPOUSE: ");
spouseLabel.appendChild(spouseLabelText);

var spouseLnameInput = document.createElement("INPUT");
spouseLnameInput.setAttribute("id","spouseLname");
spouseLnameInput.setAttribute("type","text");
spouseLnameInput.setAttribute("name","spouseLastName");
spouseLnameInput.setAttribute("placeholder","Last Name");

var spouseFnameInput = document.createElement("INPUT");
spouseFnameInput.setAttribute("id","spouseFname");
spouseFnameInput.setAttribute("type","text");
spouseLnameInput.setAttribute("name","spouseFirstName");
spouseFnameInput.setAttribute("placeholder","First Name");

var spouseMnameInput = document.createElement("INPUT");
spouseMnameInput.setAttribute("id","spouseMname");
spouseMnameInput.setAttribute("type","text");
spouseLnameInput.setAttribute("name","spouseMiddleName");
spouseMnameInput.setAttribute("placeholder","Middle Name");

var childrenNumInput = document.createElement("INPUT");
childrenNumInput.setAttribute("id","childrenNum");
childrenNumInput.setAttribute("type","text");
childrenNumInput.setAttribute("name","numOfChildren");
childrenNumInput.setAttribute("placeholder","Number of Children");
childrenNumInput.setAttribute("onkeypress","return isNumberKey(event)");

var contactNumInput = document.createElement("INPUT");
contactNumInput.setAttribute("id","contactNum");
contactNumInput.setAttribute("type","text");
contactNumInput.setAttribute("name","spouseContactNo");
contactNumInput.setAttribute("placeholder","Contact Number");
contactNumInput.setAttribute("onkeypress","return isNumberKey(event)");

var addressInput = document.createElement("INPUT");
addressInput.setAttribute("id","address");
addressInput.setAttribute("type","text");
addressInput.setAttribute("name","spouseAddress");
addressInput.setAttribute("placeholder","Address");

marriedInputs.appendChild(spouseLabel);
marriedInputs.appendChild(document.createElement("BR"));
marriedInputs.appendChild(spouseLnameInput);
marriedInputs.appendChild(document.createElement("BR"));
marriedInputs.appendChild(spouseFnameInput);
marriedInputs.appendChild(document.createElement("BR"));
marriedInputs.appendChild(spouseMnameInput);
marriedInputs.appendChild(document.createElement("BR"));
marriedInputs.appendChild(childrenNumInput);
marriedInputs.appendChild(document.createElement("BR"));
marriedInputs.appendChild(contactNumInput);
marriedInputs.appendChild(document.createElement("BR"));
marriedInputs.appendChild(addressInput);
marriedInputs.appendChild(document.createElement("BR"));

document.getElementById("spouseLname").required = true;
document.getElementById("spouseFname").required = true;
document.getElementById("spouseMname").required = true;
document.getElementById("childrenNum").required = true;
document.getElementById("contactNum").required = true;
document.getElementById("address").required = true;
} else {
if (document.body.contains(document.getElementById("spouseLname"))) {
var breaks = marriedInputs.getElementsByTagName("BR");
for (var i = 0; i < breaks.length; i++) {
marriedInputs.removeChild(breaks[i]);
}
marriedInputs.removeChild(document.getElementById("spouseLabelID"));
marriedInputs.removeChild(document.getElementById("spouseLname"));
marriedInputs.removeChild(document.getElementById("spouseFname"));
marriedInputs.removeChild(document.getElementById("spouseMname"));
marriedInputs.removeChild(document.getElementById("childrenNum"));
marriedInputs.removeChild(document.getElementById("contactNum"));
marriedInputs.removeChild(document.getElementById("address"));
}
}
}


Can anyone pinpoint the problem? I'm not really a js person, I just needed this for some onchange in a select element.

And I would very appreciate any tips for writing a cleaner version of this script. Cheers!!

Forgot the HTML:

Marital Status:
<select id="maritalStatusList" onchange="myFunction()">
<option value="Single">Single
<option value="Married">Married
<option value="Divorced">Divorced
<option value="Widowed">Widowed
</select>
<div id="marriedInputs">

</div>

Answer

There were some issues in fetching brs and removing them. I tried replacing it with querySelector and it worked fine.

function removeBRs() {
  var breaks = document.querySelectorAll('#marriedInputs br')
  for (var i = 0; i < breaks.length; i++) {
    marriedInputs.removeChild(breaks[i]);
  }
}

JSFiddle.

Also a side note, there is a lot of redundant code. Export them into smaller functions with common logic. Also, you can wrap all fields for married case inside a container div and append this div to main #marriedInputs. This will ease process of removing it.

Following is the updated JSFiddle. I'd still recommend using wrapper div instead of br though. Also I have removed the use of removeBRs and deleted it.

Hope it helps!