Entfernen Sie eine dynamisch hinzugefügte _parent_ div

Question

Ich habe eine Funktion, die div dynamisch hinzufügt, was ich brauche, ist eine Schaltfläche innerhalb, die diese div. ZB: auf Knopfdruck wird ein div hinzugefügt, mit einem Knopf im Inneren. Mit einem Klick auf diesen Button wird das div entfernt. Hier ist mein Code für die Zugabe von divs:

function newTextQuestion() { 
var div = document.createElement('div'); 

div.style.borderLeft = "3px solid #00897b"; 
div.style.marginBottom = "20px"; 
div.style.paddingLeft = "10px"; 
div.style.backgroundColor = "white"; 

div.className = 'q'; 
div.setAttribute('data-type', '0'); 

var name = "random-" + parseInt(Math.random() * 1000000000); 
div.innerHTML = '<h5>Tekstiküsimus:</h5><input class="text" name="' + name + '" type="text" placeholder="Küsimuse tekst..." oninvalid="this.setCustomValidity(\'\See väli on kohustuslik!\'\)" oninput="setCustomValidity(\'\'\)" required>'; 
document.getElementById('questionnaireDiv').appendChild(div); 

} 

--- EDIT ---

Was ich versucht habe bisher:

function newTextQuestion() { 
    var div = document.createElement('div'); 

div.style.borderLeft = "3px solid #00897b"; 
div.style.marginBottom = "20px"; 
div.style.paddingLeft = "10px"; 
div.style.backgroundColor = "white"; 

var delbutton = document.createElement('button'); 
var delbuttontext = document.createElement('X'); 
delbutton.appendChild(delbuttontext); 
delbutton.setAttribute("onclick", function() { $(this).parent().remove(); }); 

div.appendChild(delbutton); 

div.className = 'q'; 
div.setAttribute('data-type', '0'); 

var name = "random-" + parseInt(Math.random() * 1000000000); 
div.innerHTML = '<h5>Tekstiküsimus:</h5><input class="text" name="' + name + '" type="text" placeholder="Küsimuse tekst..." oninvalid="this.setCustomValidity(\'\See väli on kohustuslik!\'\)" oninput="setCustomValidity(\'\'\)" required>'; 
    document.getElementById('questionnaireDiv').appendChild(div); 

} 

Answer 1

Wenn Sie benötigen Event-Handling-Fähigkeiten, don‘ t Um ein Element über .innerHTML zu erstellen, verwenden Sie die document.createElement() Technik. Um die Schaltfläche zu erstellen, folgen Sie einfach der gleichen Technik, die Sie bereits gestartet haben.

Außerdem ist es am besten, wenn Sie mit CSS-Klassen arbeiten können, anstatt einzelne Eigenschaften festzulegen.

var parent = document.getElementById('questionnaireDiv'); 
 
    
 
function newTextQuestion() { 
 
    var div = document.createElement('div'); 
 

 
    div.classList.add("newDiv"); 
 
    div.classList.add("q"); 
 
    
 
    div.setAttribute('data-type', '0'); 
 

 
    var name = "random-" + parseInt(Math.random() * 1000000000); 
 
    
 
    var h5 = document.createElement("h5"); 
 
    var input = document.createElement("input"); 
 
    input.type = "text"; 
 
    input.classList.add("text"); 
 
    input.placeholder = "Küsimuse tekst..."; 
 
    input.required = true; 
 
    
 
    input.addEventListener("invalid", function(){ 
 
    this.setCustomValidity("\'See väli on kohustuslik!\'"); 
 
    }); 
 
    
 
    input.addEventListener("input", function(){ 
 
    this.setCustomValidity(""); 
 
    }); 
 

 
    
 
    var btn = document.createElement("button"); 
 
    btn.textContent = "Delete"; 
 

 
    div.appendChild(h5); 
 
    div.appendChild(input); 
 
    div.appendChild(btn); 
 
    
 
    btn.addEventListener("click", function(){ 
 
    parent.removeChild(div); 
 
    }); 
 
    parent.appendChild(div); 
 
} 
 

 
newTextQuestion();

.newDiv { 
 
    border-left: 3px solid #00897b; 
 
    margin-bottom: 20px; 
 
    padding-left: 10px; 
 
    background-color:"white"; 
 
}

<div id="questionnaireDiv"></div>