Javascript-从动态表单中删除元素

我目前正在开发一个表单，它有一个“+”按钮，可以再次动态显示相同的表单

这部分工作正常，我在添加删除按钮时遇到了一个问题，该按钮允许删除表单的一部分。它每次都会删除整个动态生成的表单，而不仅仅是对应于动态表单计数器的“单击”表单

这是我的html代码

 <!-- Div that the content the dynamic form -->
 <div id="dynamicInput">

 </div>

 <!-- Input button that active the script onClick -->
 <input type="button" class="add_delivery" value="Ajouter une destination" onClick="addInput('dynamicInput');">       

这是我的javascript

var counter = 1; // Count the number of dynamic form generated
var limit = 20; // Limit amount of dynamic form 

// Function to add the form
function addInput(divName){

 // Check if max limit is reached and display alert
 if (counter == limit)  {
      alert("You have reached the limit of adding " + counter + " inputs");
 } 

 // If limit max is not reached create the form element
 else {
      var newdiv = document.createElement('div');
      newdiv.innerHTML = "<div class='delivery_booking_container_left_recipient'><a href='javascript:void(newdiv);' class='remove'>×</a><div class='recipient_name_title2'>Destinataire " + (counter + 1) + "</div><input type='text' name='recipient_name' id='recipient_name' class='delivery_field_recipient_name' placeholder='  Destinataire' value='<?php if(isset($recipient_name)) { echo $recipient_name; } ?>'><input type='text' name='recipient_phone' id='recipient_phone' class='delivery_field_recipient_phone' placeholder='  N° de téléphone' value='<?php if(isset($recipient_phone)) { echo $recipient_phone; } ?>'/></div><div id='ocationField2'><input id='autocomplete2' name='recipient_address' class='delivery_field_recipient_address' placeholder='  Adresse' onFocus='geolocate()'' type='text' value='<?php if(isset($recipient_address)) { echo $recipient_address; } ?>'/></div><div id='addresstwo'><input type='text' id='street_number2' name='street_number2' /><input type='text' id='route2' name='street_name2' /><input type='text' id='locality2' name='town_city2' /><input type='text' id='administrative_area_level_12' name='administrative_area_level_12' /><input type='text' id='postal_code2' name='postcode2' /><input type='text' id='country2' name='country2' /></div><textarea name='recipient_more_infos' id='recipient_more_infos' class='delivery_field_sender_more_infos' placeholder='  Informations complémentaires' value='<?php if(isset($recipient_more_infos)) { echo $recipient_more_infos; } ?>'></textarea>";                     


// Function to remove a dynamic form on click using the <a href='javascript:void(newdiv);' class='remove'>×</a> 
$(document).on("click", "a.remove" , function() {
document.getElementById(divName).appendChild(newdiv).remove(newdiv);

// Reset the input to have the right count when adding a new on after deleting
resetaddInput(newdiv);
});

// Add ++ to the counter
document.getElementById(divName).appendChild(newdiv);
counter++;
   }
}

var counter=1；//计算生成的动态表单数
var limit=20；//限制动态表单的数量
//函数来添加表单
函数addInput（divName）{
//检查是否达到最大限制并显示警报
如果（计数器==限制）{
警报（“您已达到添加“+计数器+”输入的极限”）；
} 
//如果未达到最大限制，请创建表单元素
否则{
var newdiv=document.createElement（'div'）；
newdiv.innerHTML=“Destinataire”+（counter+1）+“/>您需要添加一些父div/p元素作为选择器，可以选择整个新添加的表单，如

<div class="fomesection">
<div class='delivery_booking_container_left_recipient'><a href='javascript:;' class='remove'>×</a>....</textarea>
</div>

首先，你不能从JavaScript中添加PHP代码，而期望它被任何人解析。PHP代码是在服务器端解析的，你的JavaScript代码只是在客户端。我在这里使用PHP是因为在向服务器提交表单时，我对表单字段做了一些检查，如果出现错误，我会继续显示用户输入的信息然后告诉他需要编辑什么才能进入下一步。在这种情况下，它可以正常工作吗？：）我要再说一遍：你的JavaScript代码只在客户端运行，你的PHP代码只在服务器上运行。如果你在某个元素的innerHTML中输出PHP代码，没有人会解析它。你的意思是我需要创建一些JavaScript变量来获取PHP值和然后在innerHTML中添加Javascript值？是的，您需要至少对PHP脚本执行一次AJAX调用，获得结果并将其插入innerHTMLHi中。谢谢！它可以只删除一个添加的表单。我仍然遇到问题：1/多个表单生成（form1、form2、form3，…）：如果已生成表单2，则我只能删除表单1；如果已生成表单3，则我可以删除表单2；如果已生成表单3，则我无法删除最后生成的表单。2/已生成一张表单（表单1）：无法删除表单1。第一个生成的表单怎么可能不使用选择器？我使用了
计数器使名称动态化。我可以在我的谷歌控制台中看到它使用了计数器。
class=“fomesection2”
为div显示，并且
href=“javascript:removeformdiv（fomesection2）；”
用于删除链接。但它在我的JQuery中不起作用：
'JQuery（'.remove'）。单击（函数（）{JQuery（this）.父项（'.fomesection'+counter+''）.remove（）；}）；document.getElementById（divName）.appendChild（newdiv）；counter++；
 jQuery(document).on('click','.remove',function(){ 
   jQuery(this).parents('.fomesection').remove();
 });