Question

Well the title says it al. My javascript function build some “blocks” and uses <ul> and <li> to create them. The problem is, that it removes all other <li> on the webpage.

Edit:
(well, I assume the function is causing this. And with removing I mean: they are completely gone, looking at the HTML source in the browser shows me only <ul></ul> and no <li></li> in it, they are GONE)

Giving the webpage’s <ul> and <li> a different class had no effect, it still removes the <li></li>

How can I prevent this?

The JS function (just a part of it):

//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 HTML which JS uses:

<div id="a2">
                    <ul></ul>
                    <ul></ul>
                    <ul></ul>
                    <ul></ul>
                    <a class="x"></a>
                </div>

Other HTML on webpage where the <li></li> gets removed:

<div id="scoreboard-overview">
        <ul> 
             <li>
             test
             </li>
etc etc etc

Any help is appreciated

Kind regards,
Maurice

Answer 1

That’s because you call

var floors = $('ul');
floors.empty();

EDIT – to select only the ul inside <div id="a2"> use

$('div#a2 ul');