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中創建的子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中創建刪除鏈接：

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

嗯，我設法做到了：

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

元素被成功刪除，但是它改變了其余元素的內容:(也許我需要生成一個隨機的“ id”，並避免為每個元素使用“ one”？如何使用隨機函數或count來做到這一點？