Zigning Ответов: 1

Как изменить или удалить элементы div, которые я создаю в цикле for, который выполняется при нажатии кнопки.


Я перепробовал довольно много вещей, но сначала вот HTML-код.

Вот 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, который создается.
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, он будет удален
старые дивы из более раннего клика на кнопку вместо того чтобы просто добавлять новые
дивы под теми, что уже созданы

Что я уже пробовал:

согласно данным w3schools ссылка дом, там не способ deleteElement, связанные с объектом документ. Так что прямо сейчас я просто пытаюсь изменить содержание, хотя это и не моя конечная цель...

Я попытался использовать функцию changecontent (), связанную с одной кнопкой, чтобы изменить innerHTML следующим образом.

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


Но это, кажется, не работает. Кроме того, я попытался получить доступ к div innerHTML и изменить содержимое в разных частях кода. Но это все равно не сработает.

1 Ответов

Рейтинг:
9

Bryian Tan

Из того, что я понял, вы хотите, чтобы код очистил ранее созданный div. Например, если текстовое поле ввода имеет значение "type", нажмите кнопку submit, текущий код создаст 4 элемента Div для хранения каждого символа. Если пользователь наберет "abc" после этого, то текущий код добавит еще 3 элемента div (всего 7). Но вы хотите увидеть 3 div элемента (только abc)?

Самый простой способ-очистить контейнер div. Вот вам пример:

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

Вот демо-версия: CP_clear_dom_Div - JSFiddle[^]