動態添加和刪除基於複選框值的元素與DOM

我只是試圖動態地添加到窗體內的一個div取決於選中的複選框。因此，我創建了li標籤，然後它們被添加爲父元素內的li元素，所以它只是一個值列表。我不知道我的代碼出了什麼問題，如果相關複選框未選中，我不知道如何刪除相應的值，以及何時取消選中然後重新檢查複選框，它會一直添加值。動態添加和刪除基於複選框值的元素與DOM

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title></title> 
 
    <style> 
 
    input { 
 
     margin: 18px; 
 
    } 
 

 
    #o { 
 
     list-style-type: none; 
 
    } 
 
    .u { 
 
     list-style: none; 
 
    } 
 
    </style> 
 
</head> 
 
<body style="width: 700px"> 
 

 
    <div style="float: left; width: 340px; height: 250px; border: 1px solid black; padding: 20px 0 10px 20px;"> 
 
     
 
     <form id="myForm"> 
 
     <ul class="u"> 
 
      <li><input id="showAlert1" type="checkbox" name="thing" value="laptop">laptop</li> 
 
      <li><input id="showAlert2" type="checkbox" name="thing" value="iphone">iphone</li> 
 
     </ul> 
 
     </form> 
 

 
    </div> 
 

 
    <div id="myDiv" style="float: right; width: 317px; height: 250px; border: solid black; border-width: 1px 1px 1px 0; padding: 20px 0 10px 20px;"> 
 
    <ol id="o"> 
 
    
 
    </ol> 
 
    </div> 
 
<script> 
 

 
    document.getElementById('myForm').addEventListener('change', function() { 
 

 
    var a = document.getElementsByName('thing'); 
 
    
 
    for (var i = 0; i < a.length; i++) { 
 
     if (a[i].checked){ 
 
      createDynamicElement(); 
 
     } else if (!a[i].checked){ 
 
      removeDynamicElement(); 
 
     } 
 
    } 
 

 
     function createDynamicElement(){ 
 
     var node = document.createElement("LI"); 
 
      node.setAttribute("id1", "Hey"); 
 
      var textnode = document.createTextNode(event.target.nextSibling.data); 
 
      node.appendChild(textnode); 
 
      document.getElementById("o").appendChild(node); 
 
     } 
 

 
     function removeDynamicElement() { 
 
     document.querySelector("#o li").innerHTML = ""; 
 
     } 
 

 
    }); 
 

 
</script> 
 
</body> 
 
</html>

來源

2017-01-10 Bestii

看起來要添加事件偵聽器的形式，而不是輸入元素。當窗體中的輸入元素髮生更改時，我不認爲更改事件會被觸發。（請參閱：https://developer.mozilla.org/en-US/docs/Web/Events/change）

在您的事件偵聽器上，嘗試定位輸入元素本身。

來源

2017-01-10 18:39:53

} else if (!a[i].checked){ 
     removeDynamicElement(); 
} 

... 
function removeDynamicElement() { 
    document.querySelector("#o li").innerHTML = ""; 
}

將清空第一個或所有匹配（不確定），但不會刪除它們。相反，你應該給李標籤唯一的ID，並通過類似於完全刪除它們：

for (var i = 0; i < a.length; i++) { 
    if (a[i].checked){ 
     console.log(a[i]) 
     createDynamicElement(a[i].value); 
    } else if (!a[i].checked){ 
     removeDynamicElement(a[i].value); 
    } 
} 

    function createDynamicElement(id){ 
     var node = document.createElement("LI"); 
     node.setAttribute("id", id); 
     var textnode = document.createTextNode(id); 
     node.appendChild(textnode); 
     console.log(node) 
     document.getElementById("o").appendChild(node); 
    } 
    function removeDynamicElement(id) { 
    var target = document.getElementById(id) 
    target.parentElement.removeChild(target); 
    }

或者你可以完全清除每一個變化的醇，並再次重新填充它像：

var a = document.getElementsByName('thing'); 
document.getElementById("o").innerHTML = null; 

for (var i = 0; i < a.length; i++) { 
    if (a[i].checked){ 
     console.log(a[i]) 
     createDynamicElement(a[i].value); 
    } 
} 

    function createDynamicElement(id){ 
     var node = document.createElement("LI"); 
     var textnode = document.createTextNode(id); 
     node.appendChild(textnode); 
     console.log(node) 
     document.getElementById("o").appendChild(node); 
    }

編輯：

一個適當的FIFO的解決方案：

var a = document.getElementsByName('thing'); 

for (var i = 0; i < 2; i++) { 
    var target = document.getElementById(a[i].value); 
    if (a[i].checked && !target){ 
     createDynamicElement(a[i].value); 
    } else if ((!a[i].checked) && target){ 
     removeDynamicElement(a[i].value); 
    } 
} 

    function createDynamicElement(id){ 

     var node = document.createElement("li"); 
     node.setAttribute("id", id); 
     var textnode = document.createTextNode(id); 
     node.appendChild(textnode); 
     document.getElementById("o").appendChild(node); 

     console.log("a") 
    } 
    function removeDynamicElement(id) { 
    target.parentElement.removeChild(target); 
    } 

});

來源

2017-01-10 19:09:09

但我想設置序列，當我檢查筆記本電腦和iPhone，然後我不檢查筆記本電腦，再次檢查筆記本電腦，它應該在iphone後打印。 – Bestii

問題在於for循環添加新元素而不檢查li是否已經存在於OL中。 –

動態添加和刪除基於複選框值的元素與DOM

回答

相關問題