22.11.2022, 14:45
Code:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamische Felder</title>
<style>
* {
margin: 0;
padding: 0;
}
#fieldlist {
width: 420px;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
#fieldlist .field {
width: 100%;
box-sizing: border-box;
display: flex;
flex-direction: column;
margin-bottom: 24px;
}
#fieldlist .field .field_title {
margin-bottom: 6px;
width: 360px;
}
#fieldlist .field .field_time {
margin-bottom: 6px;
width: 360px;
}
#fieldlist .field .field_info {
margin-bottom: 6px;
width: 400px;
}
</style>
<script>
'use strict';
var btn_add, fieldlist;
document.addEventListener('DOMContentLoaded', init);
function init() {
fieldlist = document.querySelector('#fieldlist');
btn_add = document.querySelector('.btn_add');
btn_add.addEventListener('click', function() {
let field = document.createElement('div');
field.classList.add('field');
fieldlist.appendChild(field);
// Titelelement hinzufügen und Placeholder, Type und CSS-Klassen zuweisen
let fieldTitle = document.createElement('input');
fieldTitle.classList.add('field_title');
fieldTitle.setAttribute('placeholder', 'Titel');
fieldTitle.setAttribute('type', 'text');
field.appendChild(fieldTitle);
// Dauer-Element erstellen
let fieldTime = document.createElement('input');
fieldTime.setAttribute('type', 'text');
fieldTime.classList.add('field_time');
fieldTime.setAttribute('placeholder', 'Dauer');
field.appendChild(fieldTime);
// Feldinformationen erstellen und hinzufügen
let fieldInfo = document.createElement('textarea');
fieldInfo.classList.add('field_info');
fieldInfo.setAttribute('placeholder', 'Mehr Informationen...');
field.appendChild(fieldInfo);
// Löschbuttun hinzufügen
let btnDel = document.createElement('button');
btnDel.textContent = "löschen";
btnDel.classList.add('btn_del');
field.appendChild(btnDel);
// Löschbutton EvenListener zuweisen und Methoden reinschreiben
btnDel.addEventListener('click', ()=> {
// Selektiere Elternelement vom Entfernen-Button
let btnParent = btnDel.parentElement;
// Entferne alle Elemente aus dem Elternelement
// Das ist wichtig damit sowohl Speicher als auch DOM geleert wird
while (btnParent.firstChild) {
btnParent.removeChild(btnParent.firstChild);
}
// Entferne Elternelement direkt
btnParent.remove();
});
});
}
</script>
</head>
<body>
<div id="fieldlist">
<div class="field">
<input type="text" class="field_title" placeholder="Titel">
<input type="text" class="field_time" placeholder="Dauer">
<textarea class="field_info" placeholder="Mehr Informationen..."></textarea>
</div>
</div>
<button class="btn_add">hinzufügen</button>
</body>
</html>
"Gerne dürft ihr mir eine gute Bewertung da lassen aber auch gegenüber Kritik bin ich offen" 