Javascript - 從動態表格中刪除元素

Question

我目前正在製作一個帶有「+」按鈕的表單，該表單允許再次動態顯示相同的表單。當添加允許刪除表單的一部分的刪除按鈕時，它會刪除每次整個動態生成的表單，而不是僅僅對應於動態表單的計數器的「單擊」表單。

<!-- 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');">  

這是我的javascrip牛逼

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(); 
});