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

Question

I am quite new to javascript and was wondering if anyone can help with an issue I am having. I want to dynamically add and remove from a list group with inputs. I have worked out the mechanic's from a script floating around the internet but having issues with getting the input as part of the add remove method. see below.

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

This script adds and removes the LI fine. But I want to have the input hold the information.

I want example: <li class="list-group-item"><input id="RM" name="codeal[]" value="RM"/>RM</li> Currently getting example: <li class="list-group-item" id="RM" name="codeal[]" value="RM">RM</li>

Any help would be much appreciated thanks

Answer 1

Try creating a new input node as you created list and append it to list node as child element.

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