使用子元素删除父元素

Question

I am trying to remove a div when a user clicks on the remove button, but as of now it only removes the button, how can I make it remove the entire div that it is held in? I have added my attempt below, as you can see I remove the button and attempt to remove the entire div that it is held in but I have not been able to. I have tried to remove the parentElement but that did not work either, I am not sure what I have done wrong.

 var noteCount = 0; function addNote(style) { const notesBox = document.getElementById('notesBox'); var noteBoxes = document.createElement('div'); textarea = document.createElement('textarea'), remove = document.createElement('button'), today = new Date(), txt = document.createTextNode('' + today.toLocaleDateString() + ' ' + today.getHours() + ':' + today.getMinutes()); notesBox.appendChild(noteBoxes); noteBoxes.setAttribute('class', style); noteBoxes.className = 'noteBoxes'; noteBoxes.setAttribute('id', style); noteBoxes.id = 'note box ' + noteCount; noteBoxes.appendChild(textarea); noteBoxes.appendChild(remove); textarea.appendChild(txt); textarea.setAttribute('class', style); textarea.className = 'notesE'; textarea.setAttribute('id', style); textarea.id = 'note' + noteCount; remove.setAttribute('class', style); remove.className = 'removeNote'; remove.setAttribute('id', style); remove.id = '-Note' + noteCount; remove.onclick = function() { this.parentElement.removeChild(this); this.noteBoxes.removeChild(this.noteBoxes); } noteCount++; console.log(textarea.id); } 

 <div id="custNotes" style=" width: 520px; margin: 0 auto;"> <h3>Notes</h3> <button class="options" onclick="addNote()" style="margin-bottom: 10px;">add</button> <div class="notesScroll" style="width: 550px; background-color: #606060; margin: 0 auto;"> <div id="notesBox" style="padding: 10px; width: 510px;"> <div id="noteBoxes"> <textarea class="notesE"></textarea> <button class="removeNote"></button> </div> </div> </div> </div> 

Answer 1

You need to use this line of code:

this.parentElement.remove();

instead of

this.parentElement.removeChild(this);
this.noteBoxes.removeChild(this.noteBoxes);

What are you doing wrong?

You're selecting the current element's parent's child which is itself (the button you're clicking). That's why it is removing the button instead of it's parent that is the div container.

 var noteCount = 0; function addNote(style) { const notesBox = document.getElementById('notesBox'); var noteBoxes = document.createElement('div'); textarea = document.createElement('textarea'), remove = document.createElement('button'), today = new Date(), txt = document.createTextNode('' + today.toLocaleDateString() + ' ' + today.getHours() + ':' + today.getMinutes()); notesBox.appendChild(noteBoxes); noteBoxes.setAttribute('class', style); noteBoxes.className = 'noteBoxes'; noteBoxes.setAttribute('id', style); noteBoxes.id = 'note box ' + noteCount; noteBoxes.appendChild(textarea); noteBoxes.appendChild(remove); textarea.appendChild(txt); textarea.setAttribute('class', style); textarea.className = 'notesE'; textarea.setAttribute('id', style); textarea.id = 'note' + noteCount; remove.setAttribute('class', style); remove.className = 'removeNote'; remove.setAttribute('id', style); remove.id = '-Note' + noteCount; remove.onclick = function() { this.parentElement.remove(); } noteCount++; console.log(textarea.id); } 

 <div id="custNotes" style=" width: 520px; margin: 0 auto;"> <h3>Notes</h3> <button class="options" onclick="addNote()" style="margin-bottom: 10px;">add</button> <div class="notesScroll" style="width: 550px; background-color: #606060; margin: 0 auto;"> <div id="notesBox" style="padding: 10px; width: 510px;"> <div id="noteBoxes"> <textarea class="notesE"></textarea> <button class="removeNote">Remove</button> </div> </div> </div> </div> 

Answer 2

Create a new attribute to the button and set its value as the parent div. On click of the button get this value. Since this value is same as the id of the parent , use it to remove from the dom.Also not the id of each element need to be unique

 var noteCount = 0; function addNote(style) { const notesBox = document.getElementById('notesBox'); var noteBoxes = document.createElement('div'); textarea = document.createElement('textarea'), remove = document.createElement('button'), today = new Date(), txt = document.createTextNode('' + today.toLocaleDateString() + ' ' + today.getHours() + ':' + today.getMinutes()); notesBox.appendChild(noteBoxes); noteBoxes.setAttribute('class', style); noteBoxes.className = 'noteBoxes'; noteBoxes.setAttribute('id', style); noteBoxes.id = 'noteBoxes' + noteCount; noteBoxes.appendChild(textarea); noteBoxes.appendChild(remove); textarea.appendChild(txt); textarea.setAttribute('class', style); textarea.className = 'notesE'; textarea.setAttribute('id', style); textarea.id = 'note' + noteCount; remove.setAttribute('class', style); remove.className = 'removeNote'; remove.setAttribute('id', style); remove.id = '-Note' + noteCount; // adding a new attribute to data-parent-id remove.setAttribute('data-parent-id', 'noteBoxes' + noteCount); remove.onclick = function() { // get the id of the parent on click var getParentId = this.getAttribute('data-parent-id') document.getElementById(getParentId).remove(); } noteCount++; console.log(textarea.id); } 

 <div id="custNotes" style=" width: 520px; margin: 0 auto;"> <h3>Notes</h3> <button class="options" onclick="addNote()" style="margin-bottom: 10px;">add</button> <div class="notesScroll" style="width: 550px; background-color: #606060; margin: 0 auto;"> <div id="notesBox" style="padding: 10px; width: 510px;"> <div id="noteBoxes"> <textarea class="notesE"></textarea> <button class="removeNote"></button> </div> </div> </div> </div>