Javascript - 撤消按钮以删除添加的元素

Question

我正在努力制作撤消按钮(删除通过我的“addText”函数创建的最后一个文本框，但似乎无法使其正常工作。当前位置的“撤消”按钮就像另一个“添加”按钮一样。 .

HTML:

<div id="planner">
  <div class="week week1">
    <div class="add">
      <h1>Weeks</h1>
      <textarea></textarea>
      <button type="submit">Add text</button>
      <button type="button"onClick="removeText()">Undo</button>
    </div>
  </div>
  <div class="week week2">
    <div class="add">
      <h1>Topics</h1>
      <textarea></textarea>
      <button type="submit">Add text</button>
      <button type="button"onClick="removeText()">Undo</button>
      </div>
  </div>

Javascript:

var addButtons = document.querySelectorAll('.add button');
var removeButtons = document.querySelectorAll('.remove button');

function addText () {
  var self = this;
  var weekParent = self.parentNode.parentNode;
  var textarea = self.parentNode.querySelector('textarea');
  var value = textarea.value;
  var item = document.createElement("p");
  var text = document.createTextNode(value);

  item.appendChild(text);
  weekParent.appendChild(item);
}

function removeText() {
  var node = document.getElementById('p');
    if (node.hasChildNodes())
      node.removeChild(node.lastChild);
}

for (i = 0; i < addButtons.length; i++) { 
    var self = addButtons[i];
    self.addEventListener("click", addText);
}

如果在删除按钮之前使用 div class= "p"，它(在正确的位置)可以删除 Weeks、textarea 和它本身(？!)，这绝对不是我想要的!本质上，按钮不能删除新创建的文本元素。提前谢谢你。

Answer 1

您的代码有一些问题。首先，你不应该使用 getElementById("p") .相反，使用 document.querySelector("p") .即使那样，它也只会返回第一个 <p>。整个页面上的元素。

您可能应该做的是保存对最近创建的文本元素的引用。像这样的东西:

var recent;

function addText () {
    var self = this;
    var weekParent = self.parentNode.parentNode;
    var textarea = self.parentNode.querySelector('textarea');
    var value = textarea.value;
    var item = document.createElement("p");
    var text = document.createTextNode(value);

    item.appendChild(text);

    // save the newly created item
    recent = item;

    weekParent.appendChild(item);
}

然后当你想删除它时:

if(recent != null){
    element.removeChild(recent);
}

我看到的第二个问题是您的添加按钮和删除按钮数组当前存储所有 <button>元素，而不是您要查找的元素。给你的按钮类，只查询那个特定的类。示例:

HTML

<button class="add" type="submit">Add text</button>
<button class="remove" type="button"onClick="removeText()">Undo</button>

JS

var addButtons = document.querySelectorAll('.add');
var removeButtons = document.querySelectorAll('.remove');