javascript - 动态删除表单元素

Question

我的 PHP 中有一个带有 JavaScript 代码的表单，可以动态添加选择元素，效果很好:

<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>

JavaScript 是:

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++;
   }
}

但我想在每个添加的元素旁边添加一个小“删除”按钮，例如 javascript 中的类似内容:

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

如何编写此 JavaScript 函数脚本以删除动态添加的元素？我想我必须说类似的话(删除在父div中创建的名为dynamicUsers的子div，但我的子div似乎没有名称/id)

有什么想法吗？谢谢!

PS:我尝试了此解决方案 1(不起作用):

我尝试做类似的事情:

1.在javascript中为div添加名称，例如:

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

2.创建一个函数，例如:

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

3.在 JS 中创建删除链接:

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

但它不会工作:(

Answer 1

现在可以很好地工作:

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++;
               }
            }

非常感谢您的提示/帮助!