How can I remove an HTML element that has the data type string in javascript?

Question

I am trying to redesign a quiz template that only allows users to choose one answer before the other options are disabled. The user should be able to choose another answer (erasing the first) before submitting.

I can remove the highlighted color class if a new answer is chosen:

answer.classList.remove("correct");

How do I remove the element for the 'tick' icon:

let tickIconTag = '<div class="icon tick"><i class="fas fa-check"></i></div>';

from this parent element:

'<div class="option"><span>'+  multiple_choice_option[i] +'</span></div>'

when the option is set like this:

  const option = option_list.querySelectorAll(".option");
  for(i=0; i < option.length; i++)
  {
    option[i].setAttribute("onclick", "optionSelected(this);");
  }//end for

and the tickIconTag is added like this:

answer.insertAdjacentHTML("beforeend",tickIconTag);

I have tried multiple ways but the main issue is that:

1.Using answer.insertAdjacentHTML("beforeend", blankelement) shifts tick inward not removed

2.Using tickIconTag.remove() gives the error "tickIconTag.remove is not a function"

3.Using answer.removeChild(tickIconTag) give the error "Parameter 1 is not of type node".

How can I set precisely the same element to blank and not shift it or remove it?

This is an image of what happens when I try to replace the element with a blank one. Green tick shifted but not removed

See my [answer](https://stackoverflow.com/a/72259323/2813224) — zer00ne, May 16 '22 at 12:38

zer00ne · Answer 1 · 2022-05-16T14:58:49.087

Pure CSS Solution

"...only allows users to choose one answer before the other options are disabled. The user should be able to choose another answer (erasing the first) before submitting."

That's the exact behavior of a RadioGroupList. Click each circle in Figure I.

Figure I

<input id='a1' name='A1' type='radio'><br>
<input id='b1' name='A1' type='radio'><br>
<input id='c1' name='A1' type='radio'><br>
<input id='d1' name='A1' type='radio'><br>

Notice the name of each element is the same A1. This allows the group of radio buttons to have mutual exclusivity.

With a <label> associated with each radio button, and some CSS we can recreate what is in the OP without JavaScript. <label>s have a unique feature in which they can be associated with a form control by assigning the for attribute with the value of a form control's #id. Once associated a <label> is insync with said form control so that if the <label> was clicked, so to does the form control as long as both are on the same page. See Figure II.

Figure II

input {
  display: block;
  width: 2rem;
}

label {
  margin-top: 80px;
  display: block;
}

input:checked+label {
  color: gold;
  background: blue;
}

<input id='fc' type='checkbox'>
<label for='fc'>CLICK HERE</label>

In the CSS the following ruleset allowed the <label> to change whenever the checkbox was checked:

Figure III

input:checked+label {
  color: gold;
  background: blue;
}

In Figure IV each <label> is associated to a hidden radio button. The user will only see and interact with the <label>. Also, the example in Figure IV is responsive.

Figure IV

html {
  font: 300 3vmax/1.2 'Segoe UI';
}

input {
  display: none
}

label {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 70vw;
  height: 2rem;
  margin: 0.5rem auto;
  padding: 0.5rem 1rem;
  border: 0.05rem solid cyan;
  border-radius: 4px;
  font: inherit;
  background: lightblue;
  cursor: pointer;
}

label b {
  position: absolute;
  display: inline-block;
  font-size: 1.2rem;
  font-weight: 300;
}

.far {
  position: absolute;
  left: 45%;
  top: 25%;
  display: inline-block;
  font-size: 1.75rem;
  color: lightblue;
}

input:checked+label {
  border-color: green;
  background: lightgreen;
}

input:checked+label i {
  color: green;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet">
<input id='a1' name='A1' type='radio' value='a' required><label for='a1'><b>Text for</b><i class="far fa-circle-check"></i></label>
<input id='b1' name='A1' type='radio' value='b'><label for='b1'><b>each answer</b><i class="far fa-circle-check"></i></label>
<input id='c1' name='A1' type='radio' value='c'><label for='c1'><b>goes into</b><i class="far fa-circle-check"></i></label>
<input id='d1' name='A1' type='radio' value='d'><label for='d1'><b>a label</b><i class="far fa-circle-check"></i></label>

How can I remove an HTML element that has the data type string in javascript?

1 Answers1

Pure CSS Solution