How can I delete an element in Javascript

Issue

I am trying to implement this site to imitate a survey creation application. In this website you can add questions and then add some options to each question and edit the text in both Question Titles and Options.

But user should be able to remove an option as well. I have implemented the addition of the option but I don't know how to let the user delete a specific option. After this I can imagine it will be the same to do for deletion of questions.

I have done so each option has it's own remove option button but I just don't know how I should actually delete the current option.

If someone has done or knows how this problem should be approached I would appreciate the help.

This is my code:

    const questionnaire = document.getElementById('questionaire');
newQuestion();

function newQuestion() {
    questionnaire.insertAdjacentHTML('beforeend',
        `<div class="question"> <div contenteditable="true">Your Question</div>
    <ul> </ul>
    <button class="addButton" type="button">Add Option</button>
   </div>`);
    newOption(questionnaire.querySelector("div.question:last-child ul"));
}

function newOption(q) {
    q.insertAdjacentHTML('beforeend',
        `<li class="optionName">
      <span contenteditable="true">Option</span>
      <input type="checkbox"> 
      <button class="removeButton" type="button">Remove Option</button>
     </li>`);
}

questionnaire.onclick = ev => {
    if (ev.target.tagName === "BUTTON") {
        if (ev.target.className === "addButton") {
            newOption(ev.target.closest(".question").querySelector('ul'))
        }
        else if (ev.target.className === "removeButton") {
            /* HERE I DON'T KNOW WHAT TO WRITE */
        }
    }
}

document.getElementById("addQuButton").onclick = newQuestion

body {
    background-color: #00ffaa;
}

#myText {
    margin-top: 15px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    text-align: center;
}

.question {
    border: 3px solid black;
    border-radius: 25px;
    margin: 30px 200px 20px 200px;
    text-align: center;
}

.question ul li {
    display: block;
}

<h1 id="myText" contenteditable="true">Survey Name</h1>
  <button type="button" id="addQuButton">Add Question</button>
  <form>
    <div id="questionaire"></div>
  </form>

Solution

const questionnaire = document.getElementById('questionaire');
newQuestion();

function newQuestion() {
    questionnaire.insertAdjacentHTML('beforeend',
        `<div class="question">
    <div contenteditable="true">Your Question</div>
    <ul></ul>
    <button type="button">Add Option</button>
   </div>`);
    newOption(questionnaire.querySelector("div.question:last-child ul"));
}

function newOption(q) {

    //Add the span with a class of 'remove-li'

    q.insertAdjacentHTML('beforeend',
        `<li class="optionName">
      <span contenteditable="true">Option</span>
      <input type="checkbox"><span class="remove-li">X<span>
     </li>`);
     
    /* Whenever you call the newOption function then find all elements of remove-li class,
     and set to the onclick listener to remove it's parent*/
    let removeItems = document.querySelectorAll('.remove-li');
    if(removeItems){
      removeItems.forEach((item)=>{
        item.onclick = function(){ this.parentNode.remove(); }
      
      })
    }
}

questionnaire.onclick = ev => {
    if (ev.target.tagName === "BUTTON") {
        newOption(ev.target.closest(".question").querySelector('ul'))
    }
}



document.getElementById("addQuButton").onclick = newQuestion

body {
    background-color: #00ffaa;
}

#myText {
    margin-top: 15px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    text-align: center;
}

.question {
    border: 3px solid black;
    border-radius: 25px;
    margin: 30px 200px 20px 200px;
    text-align: center;
}

.question ul li {
    display: block;
}

/*Add some style for the remove button*/
.remove-li{
  padding: 5px;
  background-color:red;
  color:white;
  cursor: default;
}

<h1 id="myText" contenteditable="true">Survey Name</h1>
  <button type="button" id="addQuButton">Add Question</button>
  <form>
    <div id="questionaire"></div>
  </form>

Please check the added code. May it helps to learn :)

Answered By - Rajpal Singh