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

Question

我目前正在开发一个带有“+”按钮的表单，该按钮允许再次动态显示相同的表单。

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

这是我的 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++;
   }
}

Answer 1

您需要添加一些父 div/p 元素用作选择器，可以选择整个新添加的表单，例如

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

现在，每当您单击按钮remove时，都会删除父div，它会正常工作......；或者，如果您使用 jQuery 来删除它，可以轻松地使用代码:

 jQuery(document).on('click','.remove',function(){ 
   jQuery(this).parents('.fomesection').remove();
 });