The issue at hand revolves around my JavaScript function that generates "blocks" using <ul> and <li> elements. Unfortunately, this function is removing all other <li> elements from the webpage, leaving only an empty <ul></ul> structure in the HTML source.
An attempt was made to assign a different class to the webpage's <ul> and <li> elements, but it had no effect as the <li></li> tags were still being removed by the function.
I am seeking advice on how to prevent this unintended removal of <li></li> elements by the JavaScript function.
A snippet from the problematic JS function:
//Board build up
function setBlocks() {
bR = 0;
counts = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
var mR = 5, mC = 6;
var tempFloor, tempRow, tempBlock;
var floors = $('ul');
floors.empty();
for (var f = 0; f < 4; f++) {
bM[f] = [];
for (var r = 0; r < mR; r++) {
bM[f][r] = [];
tempRow = $('<li></li>');
$(floors[f]).append(tempRow);
for (var c = 0; c < mC; c++) {
var randomNoRequired = true;
var randomClass;
while(randomNoRequired) {
randomClass = Math.round(Math.random() * 10 + 0);
if (counts[randomClass] < 6 || bR >= 66) {
randomNoRequired = false;
}
}
etc etc etc
The relevant HTML code used by the JavaScript function:
<div id="a2">
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
<a class="x"></a>
</div>
Another section of HTML where <li></li> elements are being unintentionally removed:
<div id="scoreboard-overview">
<ul>
<li>
test
</li>
etc etc etc
I would greatly appreciate any assistance with resolving this issue.
Regards, Maurice