How can I hide a style element in html

Question

ANSWERED: Thaks to @Traktor53 and @PHPglue

My webpage has a textarea for entering html code and one for entering css. The result is displayed in a div.

<textarea id="c" placeholder="CSS code here..." rows="10" cols="50">
 //What the user enters here will become a new <style> tag
</textarea>

<div id="pane">
//This is where it will be displayed
</div><br>
<button type="button" onclick="handleToggle()">Toggle</button>

I'm trying to use a javascript function that will toggle a specific style element on an off. I want to either delete the style tag and its contents or make it so the contents aren't being displayed.

EDIT: Here is my javascript

function handleToggle(){

        var pane = document.getElementById('pane');
        var css = document.getElementById('c');

        var x = document.getElementById('cssStyle');

        x.addClass("test");

This is how the style is created

function handleLaunch(){
        var div = document.getElementById('pane');
        var css = document.getElementById('c');

        var style = document.createElement('style');
        style.id = "cssStyle"
        style.type = 'text/css';
        style.innerHTML = document.getElementById('c').value;
        document.getElementsByTagName('head')[0].appendChild(style)

Answer 1

You could add a style element with an id, for example using

// create STYLE element in javascript
var se =document.createElement("STYLE");
se.id = "myCSS"; // for example
se.innerText = "textarea { background-color: yellow"; // for example
document.body.appendChild(se);

And later remove the style element using standard DOM manipulation:

// remove existing element
document.getElementById( "myCSS").remove();

Alternatively you could update the content of a STYLE element previously created using either javascript or <script> tags , as for example:

// change content of existing STYLE element:
document.getElementById( "myCSS").innerText = "textarea { background-color: blue";

---

Additional Information.

1. ChildNode.remove is part of the DOM4 recommendation and not supported in IE. The older syntax is to remove a DOM element as a child of its parent: ChildNode.parentNode.removeChild( ChildNode);

2. Although InnerText is widely supported and appears in the DOM living standard , it is not supported in current W3C DOM standards which use textContent instead.

Answer 2

visibility: hidden is CSS not HTML. HTML attributes are assigned using = , not : . Many times these attributes are the same as CSS or JavaScript properties, but that's not the case here.

function removeLastStyleTag(){
  var s = document.getElementsByTagName('style'), l = s.length;
  while(l--){
    var n = s[l];
    if(n.nodeName.match(/^style$/i)){
      n.parentNode.removeChild(n); l = 0;
    }
  }
}

Answer 3

If you want the HTML Element to be hidden try the following in the CSS

.class{
    display: none;
}

Edit :

Seems like addClass and removeClass are not working everywhere. With standard JavaScript this can be achieved with

 function handleToggle(){
     // get the element
     var element = document.getElementById('pane');

     // toggle
     element.classList.toggle(".class");

 }

This will hide and show the element. It will not insert any code inside, if that's what you're looking for.

Hope this helps! If you have questions let me know