删除一个克隆的 div 时重新编号克隆的 div

Question

我正在开发这个表单（测试）创建器，其中使用 jQuery 克隆包含表单元素的 div 以创建更多问题。原来的 div 是隐藏的。每个 div 里面还有一个按钮，上面附有onClick="javascript:$(this).parent().empty().remove();"。我的问题是通过检查有多少具有question 类的 div 存在，然后将该数字附加到“问题”并将问题 1（或问题 2、问题 3 等）设置为克隆的 div - 由于原始 div 是隐藏的，因此无需对该类的 div 数量 +1。但是，如果 div 被删除，编号就会变得混乱。示例：
1.添加了div。
2. div 称为 Question 1(id​​=question1)
3. 又增加了一个div。
4. div 称为 Question 2(id=question2)
5.First Div被移除。
6.添加了另一个div。
7.新的div被称为问题2(id=question2)
8.Question 2(id=question2) 已经存在，因为第二个 div 没有被删除。 当其中一个被删除时，我需要重新编号。 下面是克隆 div 的代码：

function copyAppendQ() {
  question = document.getElementById("question");
  clone=question.cloneNode(true);
  numberOfQuestions = $('.question').length;
  id = "questioncon"+(numberOfQuestions);
  clone.id=id;
  question.parentNode.appendChild(clone);
  inid= "question"+(numberOfQuestions);
  optionid= "optionsdiv"+(numberOfQuestions);
  $('#'+id+' '+'.'+'questionin').attr('id', inid);
  $('#'+id+' '+'.'+'options').attr('id', optionid);
 $('#' + id + ' h2').html( 'Question ' + numberOfQuestions );
}

和div（这个div是隐藏的，但是被克隆了一个不同的id，当上面的函数被调用时，删除了原始div上设置的display:none属性）

<div id="question" class="question">
                <h2></h2>
                <input id="questionin" class="questionin" style="width:341px;" ><input type="button" id="remq" onClick="javascript:$(this).parent().empty().remove();" style="background-color:#E12E1E;border:0;width:120px;color:#fff;" value="Remove Question">
                <h3>Options</h3>
                <div class="options">
                <label>a.</label><input class="option optiona"><input onClick="setAnswer(this.parentNode.id, this.className)" type="radio" class="a" name="answer">&nbsp;
                <label>b.</label><input class="option optionb"><input onClick="setAnswer(this.parentNode.id, this.className)" type="radio" class="b" name="answer">
                <div class="clear"></div>
                <label>c.</label><input class="option optionc"><input onClick="setAnswer(this.parentNode.id, this.className)" type="radio" class="c" name="answer">&nbsp;
                <label>d.</label><input class="option optiond"><input onClick="setAnswer(this.parentNode.id, this.className)" type="radio" class="d" name="answer">
                </div>  
                </div>  

这可以在这里看到：http://bit.ly/R8hB2m

Answer 1

使用以下命令开始您的 copyAppendQ 函数：

copyAppendQ.id = (copyAppendQ.id || 0)+1;

那么在分配ID时：

id = "questioncon"+copyAppendQ.id;

这将确保您不会两次获得相同的 ID，即使问题已被删除。