Javascript 如何使用append和remove更改html表单？

我正在Wordpress上做这个项目，我需要使用append和remove来动态更改html中的表单。我试着使用它，但有一些错误。它没有按预期的方式工作。以下是代码的简要说明：

<?php 
/* Template Name: FirstStarRatingSystem */      
?>

<div class="t1">
<button class="add_form_field">Add New Field &nbsp; <span style="font-
size:16px; font-weight:bold;">+ </span></button><br>    
<input type="text" class="t1" name="fname1" id="text1" placeholder="First 
Rating"></div>
<div class="rating1"> 
<legend>Please rate:</legend>
<input type="radio" class="rating1" id="star5" name="rating1" value="5" />
<label for="star5" title="Rocks!">5 stars</label>
<input type="radio" class="rating1" id="star4" name="rating1" value="4" />
<label for="star4" title="Pretty good">4 stars</label>
<input type="radio" class="rating1" id="star3" name="rating1" value="3" />
<label for="star3" title="Meh">3 stars</label>
<input type="radio" class="rating1" id="star2" name="rating1" value="2" />
<label for="star2" title="Kinda bad">2 stars</label>
<input type="radio" class="rating1" id="star1" name="rating1" value="1" />
<label for="star1" title="Sucks big time">1 star</label>
</div>
<br><br>
<br><br>
<br><br>
<div class="t2"></div>
<div class="rating2"></div>

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script>

$(document).ready(function() {
var max_fields=2;
var t2=$(".t2");
var rating2=$(".rating2");
var add_button=$(".add_form_field");

var x=1;
$(add_button).click(function(e){
e.preventDefault();
if(x < max_fields){
x++;
if(x==2)

$(t2).append('<div class="t2"><input type="text" class="t2" name="fname2" 
id="text2" placeholder="Second Rating"></div>'); //add input box 

$(rating2).append('<div class="rating2"><legend>Please rate1:</legend> 
<input type="radio" class="rating2" id="1star5" name="rating2" value="5" /> 
<label for="1star5" title="Rocks!">5 stars</label> <input type="radio" 
class="rating2" id="1star4" name="rating2" value="4" /> <label for="1star4" 
title="Pretty good">4 stars</label> <input type="radio" class="rating2" 
id="1star3" name="rating2" value="3" /> <label for="1star3" title="Meh">3 
stars</label> <input type="radio" class="rating2" id="1star2" name="rating2" 
value="2" /> <label for="1star2" title="Kinda bad">2 stars</label> <input 
type="radio" class="rating2" id="1star1" name="rating2" value="1" /> <label 
for="1star1" title="Sucks big time">1 star</label><a href="#" 
class="delete">Delete</a></div>'); //add 5 star rating.
}
 else
 {
  alert('You Reached the limits')
 }
 });

  $(rating2).on("click",".delete", function(e){
    e.preventDefault(); 
    $(t2).remove();
    $(this).parent('div').remove();

     x--;
   })
  });

  </script>

  <style>NECESSARY CSS</style>

添加新字段+

请注明：
五星
四星
三星
双星
一颗星









$（文档）.ready（函数（）{
var max_字段=2；
变量t2=$（“.t2”）；
var评级2=$（“.rating2”）；
var add_button=$（“.add_form_field”）；
var x=1；
$（添加按钮）。单击（功能（e）{
e、 预防默认值（）；
如果（x

正如您可能已经了解到的，这段代码用于显示动态输入表单以及五星评级系统。用户可以选择输入表格的数量和所需的五星评级。目前，出于测试目的，该数字仅限于2次（var max_fields=2；）。我需要在用户按下添加按钮的同时添加输入表单和五星评级，并且在用户按下删除按钮的同时删除输入表单和五星评级，但目前，这是不正常工作，并导致第二次添加的输入表单被永久删除，只有5星级评级工作正常，即得到正确的添加和删除

提前感谢

第一张图显示了添加第二张输入表格和五星评级之前的第一次输出：

删除第二个输入表单和5星级后，按“添加新字段+”按钮后显示第二个图像：

---

您的问题实际上是因为您输入字段的容器具有相同的类名，即

t2

，因此，通过下面的说明，您将同时删除这两个元素（容器和输入字段以及HTML中定义的t2元素）

因此，当您追加时，

t2

容器不再从DOM中可用。 因此var

t2

引用空值，因此

append

将不起作用

你应该这样做

$(rating2).on("click",".delete", function(e){
  e.preventDefault(); 
  $(t2).find('input').remove(); // find the input element and remove
  $(this).parent('div').remove();

  x--;
})

或将输入字段类更改为与容器不同的类

您的声明

var t2=$(".t2"); 

如何追加

$(t2).append('<div class="t2"><input type="text" class="t2" name="fname2" id="text2" placeholder="Second Rating"></div>');

---

如果可能的话，你能提供一些资源来了解更多关于这个主题的信息吗？谢谢。嗯，我没有关于这个主题的任何确切的文章或参考资料，实际上完全是基于经验的。：）你会从经验中学到更多，所以继续做你正在做的事情，不要害怕犯错误，这样你才能有效地学习。

$(t2).append('<div class="t2"><input type="text" class="t2" name="fname2" id="text2" placeholder="Second Rating"></div>');

$(t2).remove();