How do I change or delete div elements I create in a for loop that is executed on a button click.

See more:

Javascript

HTML

I have tried quite a few things, but first, here is the HTML code.

Here is the HTML.

<div id="form">
  <input id="txtinputid" type="text" value="type"/>
  <br>
  <input type="button" onclick="newlineloop()" value="submit" />
  <input type="button" onclick="changecontent()" value="clear" />
</div>
<div id="kage">
</div>

Here is the javascript, as can be seen it takes the string from an input, and display
each letter of the string in a new div that is created.

function newlineloop() {
var txtinput = document.getElementById("txtinputid").value;

    for (i = 0; i < txtinput.length; i++)
    {
        var diviv = document.createElement("div");
        document.getElementById("kage").appendChild(diviv);
        var divclass = document.createAttribute("class");
        divclass.value = "identifier";
        diviv.setAttributeNode(divclass);
        diviv.innerHTML = txtinput[i];
    }
}

I have checked the developer tools in chrome, and i can see when you click the button that executes the newlineloop() function, it works perfectly. But i cannot change the content or delete the divs after i have created them.

My goal is to do so when you click on the button that creates the div, it will delete
the old divs from an earlier click on the button instead of just adding new
divs under the ones already created

What I have tried:

according to the w3schools DOM reference, there is not deleteElement method associated with the document object. So right now im just trying to change the content, though that is not my final goal...

I have tried to use the changecontent() function associated with one button, to change the innerHTML like this.

function changecontent() {
document.getElementsByClassName("identifier").innerHTML="work?";
}

But it does not seem to work. Also i have tried to access the div innerHTML and change the content in different parts of the code. But it will still not work.