使用javascript從html中刪除div

這是我的代碼。它在一個php文件中。它不完全符合我的要求。它隱藏了一個選項並顯示另一個選項，但是我需要做的不僅僅是可視化隱藏的選項，而且根本不顯示在html中。現在，如果你點擊查看源代碼，它會顯示所有的div。我需要它時，我點擊一個選項，其他人從HTML和查看頁面源消失，只是選擇在那裏。有關於此的任何想法？使用javascript從html中刪除div

<select name="type" onchange="showstuff(this.value);"> 
       <option value="code">Code</option> 
       <option value="look">Look</option> 
       <option value="have" selected>Have</option> 
    </select> 

    <div id="have" style="display:block;">1</div> 
<div id="look" style="display:none;">2</div> 
    <div id="code" style="display:none;">3</div> 

    <script> 
    function showstuff(element){ 
     document.getElementById("have").style.display = element=="have"?"block":"none"; 
     document.getElementById("look").style.display = element=="look"?"block":"none"; 
      document.getElementById("code").style.display = element=="code"?"block":"none"; 
    } 
    </script>

來源

2016-12-06 the.matrix

「查看源文件」永遠不會改變。如果您修改DOM，瀏覽器中的DOM檢查器將會更改，但源代碼是您的瀏覽器最初收到的內容，並且不會更改。 – lonesomeday

所以有沒有辦法使用JavaScript來顯示/加載HTML只是我需要的div？ –

有一種方法可以做@lonesomeday .....堅持我會爲你寫 – driconmax

您可以創建一個div來將激活選項放在上面。

像這樣的事情

<select name="type" onchange="showstuff(this.value);"> 
    <option value="code">Code</option> 
    <option value="look">Look</option> 
    <option value="have" selected>Have</option> 
</select> 

<div id="optionContainer"> 
</div> 

<script> 

    //Object with the options. you can access for example have with options['have'] or options.have 
    var options = {'have':'<div id="have"><b>1</b></div>', 
        'look':'<div id="have"><b>2</b></div>', 
        'code':'<div id="have"><b>3</b></div>'}; 

    function showstuff(element){ 
     //Replace the inner HTML of the div optionContainer with the string in the option 
     document.getElementById("optionContainer").innerHTML = options[element]; 
    } 

</script>

我創造了這個jsfiddle看到它在行動

來源

2016-12-06 12:35:17 driconmax

謝謝。事情是在

之間，我沒有文字，但更多潛水的不同選項1 2 3.關於這個的任何想法？ –

只需在對象中添加div。 ' '有'： '

'' – driconmax

例如：

–

使用jQuery方法 - 秀（），hide（）和刪除（）。可以使用$（「＃id」）。remove（）從呈現的頁面中移除html。

https://api.jquery.com/remove/

來源

2016-12-06 12:48:19

這將從DOM中刪除它，而不是從頁面源 – phobia82

謝謝你的評論，我投了你的答案。我希望我可以將兩個答案都標記爲已接受。 –

使用javascript從html中刪除div

回答

相關問題