Javascript - Remove an element from dynamic form

Question

I'm currently working on a form that has a "+' button that allows to display dynamically the same form again.

This part is working fine, I got a problem when adding the delete button that allow to remove a part of the form. It deletes everytime the whole dynamically generated form instead of just the "clicked" form that corresponds to the counter of the dynamic form.

Here is my html code

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

Here is my 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++;
   }
}

First of all, you can't add PHP code from JavaScript and expect it to be parsed by anybody. PHP code is parsed server side and your JavaScript code is solely client side. — evilpenguin
– evilpenguin, Commented Apr 12, 2017 at 10:06
I used the PHP here because when submitting the form to the server, I did a few checks on the form fields and if an error occurs, I keep displaying the info that the user entered and show him what he needs to edit to go to the next step. In this case, it works right? :) — Romain S
– Romain S, Commented Apr 12, 2017 at 10:12
I will say again: your JavaScript code runs only on the client, your PHP code runs only on the server. If you output PHP code in some element's innerHTML, nobody will parse it. — evilpenguin
– evilpenguin, Commented Apr 12, 2017 at 14:00
You mean that I need to create some javascript variables to get the PHP values and then add the Javascript value in the innerHTML then? — Romain S
– Romain S, Commented Apr 12, 2017 at 14:16
Yes, you need to do at least one AJAX call to a PHP script, get the result and insert that into innerHTML — evilpenguin
– evilpenguin, Commented Apr 13, 2017 at 8:36

bharat · Accepted Answer · 2017-04-12 14:01:38Z

1

You need to add some parent div/p element to use as selector that can select whole newly added form like

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

now whenever you click on button remove remove the parent div it will work fine..; or if you are using jQuery to remove it can possible easily using code is :

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

edited Apr 12, 2017 at 14:01

answered Apr 12, 2017 at 10:15

bharat

1,7821 gold badge25 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Romain S Over a year ago

Hi thanks! It works to delete only one added form. I still got issues : 1/ Multiple form generated (form1, form2, form3, ...) : I can only delete form1 if form2 has been generated, delete form2 if form 3 has been generate and.. and cannot delete the last generated form. 2/ One form generated (form1) : Cannot delete form1. How is it possible that the first generated form does not take the selector?

Romain S Over a year ago

I used the counterto make the name dynamic. I can see in my google console that it takes the counter. class="fomesection2" appears for the div and href="javascript:removeformdiv(fomesection2);" for the remove link. But it produces no effect in my JQuery :

'jQuery('.remove').click(function(){      jQuery(this).parents('.fomesection'+counter+'').remove();  });  document.getElementById(divName).appendChild(newdiv); counter++;

Collectives™ on Stack Overflow

Javascript - Remove an element from dynamic form

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related