javascript - 移除带有子元素的父元素

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);

你做错了什么？

您正在选择 当前元素的父元素的子元素本身(您正在单击的按钮)。这就是为什么它要删除按钮而不是它的父元素，即 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>