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容器。

＆＃13;

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

＆＃13;

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

＆＃13;

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>

使用子元素删除父元素

2 个答案: