0

我正在努力制作我的撤消按钮（删除通过我的“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 和它本身（？！），这绝对不是我想要的！本质上，按钮无法移除新创建的文本元素。先感谢您。

4

3 回答 3

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');
于 2018-07-19T20:19:26.597 回答
0

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

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

于 2018-07-19T20:25:14.187 回答
0

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

document.getElementById('p')

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

要选择当前父级<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>该元素移至该元素。IE：

document.querySelector('#some-section').addEventListener('click', event => {
  //code here
}
于 2018-07-19T21:28:28.107 回答