Question

我试图创建一个网站，其中发生了三件事，但我被困住了。

（1）单击“添加”按钮时，将创建一个新段落并将其添加到输出中。段落的内容应来自[ADD]按钮下方的文本区域。

（2）如果按下“删除”按钮，我需要删除div中的第一段。

（3）如果用户在没有段落时尝试删除，请创建一个“警告＆＃34;这说：＆＃34;没有要删除的段落＆＃34;。

我让我的JS将每个段落放入div中，但我不确定如何删除它...任何帮助都会非常感激。

＆＃13;

window.onload = function() {
  var button = document.getElementById("add");
  button.onclick = insertItem;
}

function insertItem() {
  var added = document.getElementById("output");
  var textToAdd = document.getElementById("input");
  if (textToAdd.value != "") {
    var newp = document.createElement("p");
    newp.innerHTML = textToAdd.value;
    added.appendChild(newp);
  }
}

var deletebutton = document.getElementsByTagName("delete");
deletebutton.onclick = deleteItem;

function deleteItem() {
  var output = document.getElementById("output");
  var pars = output.getElementsByTagName("p");
  if (pars.length > 0) {
    output.removeChild(pars[0]);
  }
}

＆＃13;

#output {
  border: blue 5px solid;
  padding: 10px;
  margin-bottom: 10px;
  margin-top: 10px;
  width: 50%;
}

#output p {
  padding: 10px;
  border: black 1px dashed;
}

＆＃13;

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js" type="text/javascript"></script>
  <script src="task3.js"></script>
</head>

<body>
  <h2> TASK 3 - Creating, Appending and Deleting Nodes in the DOM Tree </h2>
  <p> Type in text below, click add to add as paragraph. <button id="add"> Add </button> </p>
  <textarea id="input" rows="10" cols="60">
    </textarea><br>
  <button id="delete">Delete Last Paragraph</button>
  <br><br>
  <h2> Added Paragraphs </h2>
  <div id="output">
  </div>
</body>

</html>

＆＃13;

Answer 1

您取错了删除按钮。您使用的是getElementsByTagName而不是id。
删除时，您可能会删除标记中不属于您的输出的第一个package.json。要解决此问题，您只需获取<p> div的所有子项并删除第一个：
```
output
```

破解的Javascript代码

1 个答案: