使用子元素刪除父元素

Question

我正在嘗試在用戶單擊“刪除”按鈕時刪除div，但是截至目前，它僅刪除了該按鈕，如何使它刪除所保存的整個div？ 我在下面添加了我的嘗試，如您所見，我刪除了該按鈕，並嘗試刪除了該按鈕所在的整個div，但我未能做到。 我曾嘗試刪除parentElement但還是沒有用，我不確定自己做錯了什么。

 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

您需要使用以下代碼行：

this.parentElement.remove();

代替

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

你在做什么錯

您正在選擇current element's parent's child which is itself （您正在單擊的按鈕）。 這就是為什么要刪除按鈕而不是div容器的父項。

 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

為按鈕創建一個新屬性，並將其值設置為父div。 單擊按鈕后，獲取此值。 由於此值與父代的ID相同，因此可使用它從dom中刪除。每個元素的ID不必唯一

 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>