时间戳

首页 > 解决方案 > 使用输入 javascript 动态添加和删除列表组

javascript - 使用输入 javascript 动态添加和删除列表组

问题描述

我对javascript很陌生，想知道是否有人可以帮助解决我遇到的问题。我想通过输入动态地添加和删除列表组。我已经从一个漂浮在互联网上的脚本中找出了机制，但是在将输入作为添加删除方法的一部分时遇到了问题。见下文。

<script type="text/javascript">
function addItem(){
  var ul = document.getElementById("selectme-list");
  var selectme= document.getElementById("selectme");
  var li = document.createElement("li");
  li.className = "list-group-item";
  li.setAttribute('id',selectme.value);
  li.setAttribute('name','codeal[]');
  li.setAttribute('value',selectme.value);
  li.appendChild(document.createTextNode(selectme.value));
  ul.appendChild(li);
}

function removeItem(){
    var ul = document.getElementById("selectme-list");
  var selectme = document.getElementById("selectme");
  var item = document.getElementById(selectme.value);
  ul.removeChild(item);
}
</script>

此脚本添加和删除 LI 罚款。但我想让输入保存信息。

我想要示例：<li class="list-group-item"><input id="RM" name="codeal[]" value="RM"/>RM</li> 目前正在获取示例：<li class="list-group-item" id="RM" name="codeal[]" value="RM">RM</li>

任何帮助将不胜感激谢谢

标签： javascripthtml

解决方案

尝试input在创建列表时创建一个新节点并将其作为子元素附加到列表节点。

function addItem(){
  var ul = document.getElementById("selectme-list");
  var selectme= document.getElementById("selectme");
  var li = document.createElement("li");
  li.className = "list-group-item";
  li.setAttribute('id',selectme.value);

  x = document.createElement("INPUT");
  x.setAttribute('name','codeal[]');
  x.setAttribute("type", "text");
  x.setAttribute("value", selectme.value);
  li.appendChild(x);
  ul.appendChild(li);
}

推荐阅读