動的に追加された_parent_ divを削除する

Question

divを動的に追加する機能があります。削除するボタンが内部にあります。 div。例：ボタンをクリックするとdivが追加され、ボタンが内側に表示されます。そのボタンをクリックすると、divが削除されます。 ---

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私がこれまで試したどのような

：ここではdiv要素を付加するための私のコードです

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

あなたがイベント処理能力を必要とする場合は、ドン」 .innerHTMLで要素を作成する場合は、document.createElement()というテクニックを使用します。ボタンを作成するには、既に開始したのと同じテクニックに従います。

また、個々のプロパティを設定する代わりに、CSSクラスを使用することをお勧めします。あなたがこれまでに試してみました何

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>