使用輸入javascript動態添加和刪除列表組

Question

我對 javascript 很陌生，想知道是否有人可以幫助解決我遇到的問題。 我想從帶有輸入的列表組中動態添加和刪除。 我已經從互聯網上流傳的腳本中找出了機制，但是在將輸入作為 add remove 方法的一部分時遇到了問題。 見下文。

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

任何幫助將不勝感激謝謝

Answer 1

嘗試在創建列表時創建一個新的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);
}