javascript - Remove form element dynamically

Question

I have a form in my PHP with JavaScript code to add select elements dynamically, which is working nicely :

<tr><th>Requester</th><td><input type="hidden" name="requester" value="<?php echo $_SESSION['user_id']; ?>"><?php echo $_SESSION['user_descr']; ?></td></tr>
<tr>
    <th>User(s) for whom you are requesting the access</th>
    <td>
        <div id="dynamicUsers">
                <?php
                   $q_users = 'SELECT id,descr,tnumber FROM users ORDER BY descr;';
                   $prep = $dbh->prepare($q_users);
                   $prep->execute();
                   $arrAll = $prep->fetchAll();
                   echo '<select name="firecallUsers[]">';
                   foreach($arrAll as $data)
                   {
                        echo '<option value="'.$data['id'].'">'.$data['descr'].'</option>';
                   }
                   echo '</select>';
                ?>
        </div>
        <input type="button" value="Add user" onClick="add_FC_User('dynamicUsers');">
    </td>
</tr>

The JavaScript is :

var counter = 1;
var limit = 5;
function add_FC_User(divName){
   if (counter == limit)  {
     alert("You have reached the limit of adding " + counter + " users");
   }
   else {
        var newdiv = document.createElement('div');
        newdiv.innerHTML = '<select name="firecallUsers[]"><?php
        $q_users = 'SELECT id,descr,tnumber FROM users ORDER BY descr;';
        $prep = $dbh->prepare($q_users);
        $prep->execute();
        $arrAll = $prep->fetchAll();
        foreach($arrAll as $data)
        {
            echo '<option value="'.$data['id'].'">'.$data['descr'].'</option>';
        }
        ?></select>';
        document.getElementById(divName).appendChild(newdiv);
        counter++;
   }
}

But I would like to add a little "remove" button next to each added element, for example something like this in the javascript :

?></select> <a href="#" onclick="remove_FC_User(''blabla'')"> remove </a>';

How can I script this javascript function in order to remove the dynamically-added elements ? I suppose I have to say something like (remove the child div created in parent div called dynamicUsers, but my child div doesn't have a name/id it seems)

any idea ? thanks!

PS : I tried this solution 1 (doesn't work) :

I tried to do something like :

1.adding a name to the div in the javascript, e.g :

var newdiv = document.createElement('div'); newdiv.id = "userDiv";

2.creating a function like :

function remove_FC_User(divName){ 
  var child = document.getElementById(userDiv); 
  var parent = document.getElementById(divName); 
  parent.removeChild(child); 
}

3.creating the remove link in the JS with :

?></select> <a href="#" onclick="remove_FC_User(\"dynamicUsers\")"> remove</a>';

but it won't work :(

remove double quote remove_FC_User(''blabla'') maybe this will work remove_FC_User('blabla') — devpro
– devpro, Commented Oct 25, 2016 at 7:53

olivierg · Accepted Answer · 2016-10-25 10:32:52Z

it's working nicely now with :

function randId() {
     return Math.random().toString(36).substr(2, 10);
}

            var counter = 1;
            var limit = 15;
            function add_FC_User(divName){
               if (counter == limit)  {
                 alert("You have reached the limit of adding " + counter + " users");
               }
               else {
                  var newdiv = document.createElement('div');
                  var randstring = randId();
                  newdiv.setAttribute("id", randstring);
                  newdiv.innerHTML = '<select name="firecallUsers[]"><?php
                  $q_users = 'SELECT id,descr,tnumber FROM users ORDER BY descr;';
                  $prep = $dbh->prepare($q_users);
                  $prep->execute();
                  $arrAll = $prep->fetchAll();
                  foreach($arrAll as $data)
                  {
                    echo '<option value="'.$data['id'].'">'.$data['descr'].'</option>';
                  }
                  ?></select> <a href="#" onclick="remove_FC_User(\'dynamicUsers\', \''+randstring+'\');"> remove</a>';
                  document.getElementById(divName).appendChild(newdiv);
                  counter++;
               }
            }

thanks a lot for your hints/help !

olivierg · Accepted Answer · 2016-10-25 08:53:20Z

0

mmh I managed to make it half-work with :

var newdiv = document.createElement('div');
newdiv.setAttribute("id", "one");

and

?></select> <a href="#" onclick="remove_FC_User(\'dynamicUsers\', \'one\');"> remove</a>';

and

function remove_FC_User(parentDiv, userDiv){
     var child = document.getElementById(userDiv);
     var parent = document.getElementById(parentDiv);
     parent.removeChild(child);
}

the elements get removed successfully, but it changes the remaining elements contents :( maybe I need to generate a random "id" and avoid using "one" for each ? how can I do that ? with a random function ? or a count ?

answered Oct 25, 2016 at 8:53

olivierg

8122 gold badges10 silver badges32 bronze badges

1 Comment

vhr Over a year ago

yes, generate your id in PHP (every time you're adding an element) - i.e. use short date with minutes and seconds + counter. that is the idea behind "SOME_GENERATED_ID"

vhr · Accepted Answer · 2016-10-25 09:08:30Z

0

You could set an id of your newly added element and then use it with your onclick: newdiv.setAttribute("id", "SOME_GENERATED_ID"); and then

 <a href="#" onclick="var elem =document.getElementById("SOME_GENERATED_ID"); elem.parentNode.removeChild(elem);">remove</a>;

Or you could use a class or name or data-* attribute. Or you could just remove the sibling of your "a" attribute etc.

edited Oct 25, 2016 at 9:08

answered Oct 25, 2016 at 7:59

vhr

1,6741 gold badge16 silver badges25 bronze badges

1 Comment

olivierg Over a year ago

also, you forgot some double quotes.

Collectives™ on Stack Overflow

javascript - Remove form element dynamically

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related