How can I delete an element in Javascript

Question

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>

Answer 1

To remove an option just add any element with a specific class like I am adding the span tag with the class name of remove-li in your option code.

and add the condition in the click event, which you've already set to the main container to check the event's clicked target, and only remove when the event's target has the given class which in our case is remove-li .

 /* Getting the questionaire container*/ const questionnaire = document.getElementById('questionaire'); /*call the 'newQuestion' to add a question with options in container */ newQuestion(); /*define the 'newQuestion' method to insert the new question html in the container at the last position */ function newQuestion() { questionnaire.insertAdjacentHTML('beforeend', `<div class="question"> <div contenteditable="true">Your Question</div> <ul></ul> <button type="button">Add Option</button> </div>`); /*calling the 'newOption' method where adding the option into the last child of question's unorderd list */ newOption(questionnaire.querySelector("div.question:last-child ul")); } /*defining the newOption method where we insert the option html into provided selector as q */ 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>`); } //set the onclick listener on main container questionnaire.onclick = ev => { // check the target with tag is button to add the new option only when the click on button if (ev.target.tagName === "BUTTON") { newOption(ev.target.closest(".question").querySelector('ul')) }else if(ev.target.className == 'remove-li'){ //Check the clicked target is remove button for the option to remove it ev.target.parentNode.remove(); } } //set the onclick event on add question button 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 :)