How can I delete an element in Javascript-CodePudding

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 > <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) {
    q.insertAdjacentHTML('beforeend',
        `<li >
      <span contenteditable="true">Option</span>
      <input type="checkbox"> 
      <button  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>

CodePudding user response：

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

function newQuestion() {
    questionnaire.insertAdjacentHTML('beforeend',
        `<div >
    <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) {
    q.insertAdjacentHTML('beforeend',
        `<li >
      <span contenteditable="true">Option</span>
      <input type="checkbox"><span >X<span>
     </li>`);
     
    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;
}

.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 :)