Estoy tratando de implementar este sitio para imitar una aplicación de creación de encuestas. En este sitio web puede agregar preguntas y luego agregar algunas opciones a cada pregunta y editar el texto tanto en Títulos de preguntas como en Opciones .
Pero el usuario también debería poder eliminar una opción . Implementé la adición de la opción , pero no sé cómo permitir que el usuario elimine una opción específica. Después de esto me imagino que será lo mismo que hacer para la eliminación de preguntas .
Lo he hecho para que cada opción tenga su propio botón de opción de eliminación, pero no sé cómo debería eliminar la opción actual.
Si alguien lo ha hecho o sabe como se debe abordar este problema agradecería la ayuda.
Este es mi código:
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> 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>Por favor, compruebe el código añadido. Que ayude a aprender :)