Я разрабатываю приложение и встретился со следующей проблематикой:
Нажав кнопку "Analizar" я верю dinámicamente с языком сценариев JavaScript отличные div
что содержат их собственную таблицу с данными. Проблематика я появляется, что, нажав ту же кнопку, второй раз "удваивает" мне данные о подмостках.
Чтобы предотвращать проблему перед созданием div
я подтверждаю, ли созданы или нет они, и если они существуют, удаляю все элементы, которые он содержит ("дети"), чтобы вновь создавать их, но с обновленной информацией.
Вещь состоит в том, что я добиваюсь того, чтобы они не вышли у меня div
удвоенные, но внутри этих информация о таблице да, которая удваивается мне, и я не нахожу способ это предотвращать.
Я оставляю начальный HTML (в div "background" он, где вводятся новые div
с Вашими подмостками):
function GetInformation() {
var section = ["A", "B", "C", "D", "F"];
var div = document.getElementById("top-mail-box");
//<---------- Compruebo si existen los div --------->
if (div != null) {
var parent = div.parentElement;
parent.removeChild(div);
} else {
alert("No existe la caja previamente creada.");
}
//<---------- Resto del código que me inserta los datos de las tablas --------->
$.ajax({
url: '../GetInformation',
type: 'GET',
datatype: 'text',
success: function(json) {
var content = document.createElement("div");
content.className = "top-mail-box";
content.id = "top-mail-box";
document.getElementById("background").appendChild(content);
for (i = 0; i < section.length; i++) {
//SECTION (creación de los distintos Div)
var meanDiv = document.createElement("div");
meanDiv.className = "accordion-group";
meanDiv.id = "meanDiv";
var firstDiv = document.createElement("div");
firstDiv.className = "accordion-heading";
var firstA = "" + section[i] + "";
var secondA = "" +
"" + "" +
"";
firstDiv.innerHTML = firstA + secondA;
var secondDiv = document.createElement("div");
secondDiv.className = "accordion-body collapse";
secondDiv.id = section[i];
var internalsecondDiv = document.createElement("div");
internalsecondDiv.className = "accordion-inner";
var tablesecondDiv = document.createElement("table");
tablesecondDiv.className = "table table - striped table - condensed";
tablesecondDiv.id = section[i] + "table";
internalsecondDiv.appendChild(tablesecondDiv);
secondDiv.appendChild(internalsecondDiv);
meanDiv.appendChild(firstDiv);
meanDiv.appendChild(secondDiv);
document.getElementById("top-mail-box").appendChild(meanDiv);
//THEAD (creación del encabezado de las tablas)
var theadElement = document.createElement("thead");
var trElement = document.createElement("tr");
trElement.className = "columns";
var row = "Category Key Value Description ";
trElement.innerHTML = row;
theadElement.appendChild(trElement);
document.getElementById(section[i] + "table").appendChild(theadElement);
//TBODY (inserción de los datos en cada tabla)
var tbodyElement = document.createElement("tbody");
for (j = 0; j < json.length; j++) {
if (json[j].ConfigFile == files[i]) {
var trElementBody = document.createElement("tr");
trElementBody.id = "row";
var tdElement = "" + json[j].Category + " " + json[j].Key + " " + json[j].Value + " " + json[j].Description + " ";
trElementBody.innerHTML = tdElement;
tbodyElement.appendChild(trElementBody);
}
}
document.getElementById(section[i] + "table").appendChild(tbodyElement);
}
},
error: function(xhr, status) {
alert(xhr + " : " + status);
}
});
}
Также существовало бы освежать страницу всегда начальной формы и потом звонить в функцию GetInformation (), но мне не удается способствовать тому, чтобы он работал последовательно.
смоги использовать свойство замены, что я permiter заменять, если он находит div, который уже определен, и предотвращать множительный аппарат, здесь он dejor пример
<p id="demo">Visit Microsoft!</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
var str = document.getElementById("demo").innerHTML;
var res = str.replace("Microsoft", "W3Schools");
document.getElementById("demo").innerHTML = res;
}
</script>
если ты используешь jquery, из-за которого ты не делаешь этим
var div = $("#top-mail-box");
if (div.length > 0) {
div.find(".accordion-group").remove();
} else {
alert("No existe la caja previamente creada.");
}
, Ты Возвращаешь контейнер, и когда он это делает, находит дети с x имя и после ты удаляешь их или если только этот она informaciГіn, что у тебя есть, ты можешь делать
$("#top-mail-box").html("");
и asГ - ты удаляешь весь она informaciГіn es
Edit En фотография, которую ты включаешь, есть многие div
с тем же самым ID
, не видя cГіdigo произведенный, состоят difГ-cil в том, чтобы знать с precisiГіn, но конечно было одна div
s, что ведет себя хорошо и оставшаяся часть остается равной.
идентификации элементов должны быть всеми различные, протестируй добавлять индекс элемента как часть имени (например: id="MeanDiv-1"
, id="AMI-1"
, id="AMITable-1"
..., id="MeanDiv-2"
и т.д....), или использовать признак data-id
, чтобы идентифицировать ее и менять ему контент вместо того, чтобы удалять ее. Первоначальные
, Чтобы Удалять дети на единственном уровне вложения я, я использую этот snipet
while (element.firstChild){
element.removeChild(element.firstChild);
};
element.parentNode.removeChild(element);
для большего количества уровней habrГ, - в который делать это перекурсивным, как в этом ответе https://stackoverflow.com / в / 32261977/1423096
замечает возврат sГіlo, - необходимо, если элементы очень взвешены в памяти, и не хочется надеяться, что пересборщик мусора удаляет "внуков и Ваши потомки", не найдя ссылки.