Question

在下面的示例中，我有一个带有按钮的脚本，该按钮将textareas添加到另一个下面作为问题字段。同时，我想添加delete()按钮，删除特定的textarea（整个输入）并重置编号以正常继续（1,2,3 ...）。

要清楚，如果我添加3个textareas，并删除第二个，我将有2个textareas编号为1,2。

解决方案是什么，以及我的delete（）函数应该是什么样的？

的index.html

ADD NEW QUESTIONS HERE:
<input type="submit" value="ADD NEW" onClick="add();"><br/><br/>

<div id="new"></div><br/>

的script.js

var n = 1;
function add() {
  var textarea = document.createElement("textarea");
  textarea.name = "question" + n;
  textarea.rows = 4;
  textarea.cols = 50;

  var div = document.createElement("div");    
  div.innerHTML = n + ". Question: <br />" + textarea.outerHTML + "<br />" + '<input type="submit" value="DELETE" onClick="delete();"><br/><br/>';

  document.getElementById("new").appendChild(div);
  n++;
}

Answer 1

我建议也为此任务使用HTML功能。您可以使用UL元素和list-style-type: decimal属性进行编号：

<ul id="new"></ul>

CSS

ul li {
    list-style-type: decimal;
}

删除功能（最好不要将其称为delete这是一种语言关键字）只是简单removeChild：

function deleteQuestion(obj) {
    obj.parentNode.parentNode.removeChild(obj.parentNode);
}

HTML

<input type="submit" value="DELETE" onClick="deleteQuestion(this);">

演示：http://jsfiddle.net/26aYj/1/

Answer 2

纯JS解决方案：

工作FIDDLE

function add() {
  var nums= document.getElementsByClassName('no')
  var n = nums.length+1;
  var textarea = document.createElement("textarea");
  textarea.name = "question" + n;
  textarea.rows = 4;
  textarea.cols = 50;
  var div = document.createElement("div");    
  div.innerHTML = "<span class='no'>"+n+"</span> . Question: <br />" + textarea.outerHTML + "<br />" + '<input type="submit" value="DELETE" onClick="delete1(this);"><br/><br/>';
  document.getElementById("new").appendChild(div);
}

function delete1(el){
 var div= el.parentNode;
 div.parentNode.removeChild(div);
 var nums= document.getElementsByClassName('no');

for(var i=0; i<nums.length;i++){
    nums[i].innerHTML = i+1;
 }
}

我已将问题编号包含在class='no的范围内，每次添加新问题时，问题编号将是此类现有范围的编号+ 1。当我们删除一个问题时，剩余的跨度从顶部开始编号为1。

JavaScript删除元素功能并继续编号

2 个答案:

演示：http://jsfiddle.net/26aYj/1/