javascript - 从数组中填充 li 元素，删除重复项并添加值(如果选中):false (on/off button)

Question

结果是每次我调用这个函数时我的列表都会变得更大。我知道我非常接近解决我的问题，但这些天我真的很紧张。任何帮助或评论将不胜感激。

function devicesoff() {
var devices = document.querySelectorAll("[id^='device_']");

for (var i = 0; i < devices.length; i++) {

    if (devices[i].checked === false) {

        var ele = devices[i].name;

        var para = document.getElementById("p");
        var list = document.createElement("li");


        var t = document.createTextNode(ele + "\n");

        list.appendChild(t);
        para.appendChild(list);

    }

}

Answer 1

首先清除旧设备，然后添加新设备。

function devicesOff() {
  var devices = document.querySelectorAll("[id^='device_']");
  var para = document.getElementById("p");
  para.innerHTML = ""; // clear old devices first

  // add new ones
  for (var i = 0; i < devices.length; i++) {
    if (devices[i].checked === false) {
      var ele = devices[i].name;
      var list = document.createElement("li");

      var t = document.createTextNode(ele + "\n");
      list.appendChild(t);
      para.appendChild(list);
    }

  }
}

<input type="checkbox" id="device_1" name="device_1" />
<input type="checkbox" id="device_2" name="device_2" />
<input type="checkbox" id="device_3" name="device_3" />

<input type="button" value="devicesOff" onclick="devicesOff()" />

<ul id="p">

</ul>