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

Answer 2

您应该为所有新创建的文本元素分配一个类名，以便可以选择所有要删除的文本元素。

<div id="planner">
  <div class="week week1">
    <div class="add">
      <h1>Weeks</h1>
      <textarea></textarea>
      <button type="submit" class="addTextBtn">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" class="addTextBtn">Add text</button>
      <button type="button"onClick="removeText()">Undo</button>
      </div>
  </div>
<script>
var addButtons = document.querySelectorAll('.addTextBtn');
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");
  item.className = "newText";
  var text = document.createTextNode(value);

  item.appendChild(text);
  weekParent.appendChild(item);
}

function removeText() {
  var nodes = document.getElementsByClassName('newText');
    for(let i = 0; i <nodes.length; i++){
    nodes[i].parentNode.removeChild(nodes[i]);
    }
}

for (i = 0; i < addButtons.length; i++) { 
    var self = addButtons[i];
    self.addEventListener("click", addText);
}
</script>

Answer 3

您的代码不起作用的原因是因为您没有选择要正确删除的项目：

document.getElementById('p')

...使用id="p"选择DOM中的第一个元素。也就是说，在您的情况下，它什么也不选择。

要选择当前<p>父级中的最后一个.week元素，可以使用：

.closest('.week').querySelector('p:last-of-type')

这是我个人要做的事情：

function addText(e) {
  // find closest parent with class "week"
  let week = e.target.closest('.week'),
    // if week, find first match for 'textarea' selector
    area = week ? week.querySelector('textarea') : null,
    // if area, get its value
    text = area ? area.value : '';
  if (text.length) {
    // if we got a value, add it as innerText of a new p appended to week
    let item = document.createElement('p');
    item.innerText = text;
    week.appendChild(item);

    // and empty textarea...
    area.value = '';
  } 
}

function removeText(e) {
  // find closest parent of e.target, including self, with class "week"
  let week = e.target.closest('.week'),
    // if week, get it's first match for 'p:last-of-type' selector
    item = week ? week.querySelector('p:last-of-type') : null;
  if (item)
    item.remove()
}

document.body.addEventListener('click', event => {
 /* 
  * if any parent of event.target (including itself) 
  * with `add-text` attribute exists...
  */
 if (event.target.closest('[add-text]')) 
   addText(event);

 /*
  * if any parent of event.target (including itself) 
  * with `remove-text` attribute exists...
  */
 if (event.target.closest('[remove-text]')) 
   removeText(event);
})

让我们测试一下：

function addText(e) {
  let week = e.target.closest('.week'),
    area = week ? week.querySelector('textarea') : null,
    text = area ? area.value : '';
  if (text.length) {
    let item = document.createElement('p');
    item.innerText = text;
    week.appendChild(item);
    area.value = '';
  } 
}

function removeText(e) {
  let week = e.target.closest('.week'),
    item = week ? week.querySelector('p:last-of-type') : null;
  if (item)
    item.remove()
}

document.body.addEventListener('click', event => {
 if (event.target.closest('[add-text]')) 
   addText(event);
 if (event.target.closest('[remove-text]')) 
   removeText(event);
})

<div id="planner">
  <div class="week week1">
    <h1>Weeks</h1>
    <textarea></textarea>
    <button type="button" add-text>Add text</button>
    <button type="button" remove-text>Undo</button>
  </div>
  <div class="week week2">
      <h1>Topics</h1>
      <textarea></textarea>
      <button type="button" add-text>Add text</button>
      <button type="button" remove-text>Undo</button>
  </div>
</div>

如果您知道页面的特定部分中只会包含此类元素，请将事件侦听器从<body>移至该元素。即：

document.querySelector('#some-section').addEventListener('click', event => {
  //code here
}

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

3 个答案: