如何更改或删除我在按钮单击时执行的for循环中创建的div元素。 [英] How do I change or delete div elements I create in a for loop that is executed on a button click.

问题描述

我尝试了很多东西，但首先，这是HTML代码。



这是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>

这是javascript，可以看出它从输入中获取字符串，并显示

每个字母的在创建的新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];
    }
}

我检查了chrome中的开发者工具，我可以看到你点击执行newlineloop（）函数的按钮，它完美地工作。但是我创建它们后无法更改内容或删除div。



我的目标是当你点击创建div的按钮时这样做将删除

之前点击按钮的旧div，而不是仅在已创建的div下添加新的

div



我尝试过：



根据w3schools DOM参考，没有与文档对象关联的deleteElement方法。所以现在我只是想改变内容，虽然这不是我的最终目标...



我试图使用与一个相关的changecontent（）函数按钮，像这样更改innerHTML。

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?";
}

但它似乎不起作用。此外，我试图访问div innerHTML并更改代码的不同部分的内容。但它仍然无效。

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.

推荐答案

根据我的理解，您希望代码清除以前创建的div。例如，如果输入文本框具有type值，则单击提交按钮，当前代码将创建4个Div元素来保存每个字符。如果用户在此之后键入abc，则提交，当前代码将追加3个div元素（Total 7）。但是你想看3 div元素（只有abc）？



最简单的方法是清除div容器。这是一个例子：

From what I understood, you want the code to clear the previously created div. For instance, if the the input textbox has "type" value, click submit button, the current code will create 4 Div elements to hold each character. If user type in "abc" after that, submit, the current code will append 3 more div elements (Total 7). But you want to see 3 div element (Only abc)?

The easiest way is to clear the div container. Here is an example:

document.getElementById("kage").innerHTML = "";

以下是演示： CP_clear_dom_Div - JSFiddle [ ^ ]

这篇关于如何更改或删除我在按钮单击时执行的for循环中创建的div元素。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！