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中创建的子div，名为dynamicUsers，但我的子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中的remove链接：

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

非常感谢你的提示/帮助！

Answer 2

您可以设置新添加元素的ID，然后将其与onclick一起使用： newdiv.setAttribute("id", "SOME_GENERATED_ID"); 然后

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

或者您可以使用类或名称或data- *属性。或者您可以删除“a”属性的兄弟等。

Answer 3

mmh我设法让它完成了半工作：

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

和

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

和

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

成功删除元素，但它会更改剩余的元素内容:( 也许我需要生成一个随机的＆＃34; id＆＃34;并避免使用＆＃34; one＆＃34;为每个？我怎样才能做到这一点？随机功能？还是伯爵？

javascript - 动态删除表单元素

3 个答案: