ListView добавление других элементов страницы, которые также не нужны

На главной странице есть две кнопки изображения (2d, 3d). Каждое изображение имеет отдельный набор изображений. Каждое изображение нажимает на две разные функции. Каждая функция (страница) имеет тот же вид списка (основная страница) и та же страница (домашняя страница). Когда я перехожу от кнопки 2d изображения к трехмерному изображению, кнопка 2d-изображения внутри контента также отображается в 3d-изображении внутри содержимого. Потому что я использую только в listview. Если есть способ, чтобы я мог обновить список при вызове функции login1() или login2(). или каким-либо способом удалить предыдущие добавленные элементы списка? Я пробовал этот $ ("# mainmenu"). Remove (y); но он не работает.

Вот определение 2d и 3d изображений в html:

<div align="center"><a id="loginpage-button" class="1" onclick="login();"><img align="center" src="images/3d.png" style="width:130px;height:130px;"/></a>

  <div align="center">
    <img src="images/2dtitle.png" style="width:110px;height:20px;" />
  </div>
</div>
<br/>
<div align="center"><a id="loginpage-button1" onclick="login1();"><img align="center" src="images/2d.png" style="width:130px;height:130px;"/></a>   
  <div align="center"><a id="loginpage-button" class="2" onclick="login();"><img src="images/3dtitle.png" style="width:110px;height:20px;"/></a>

  </div>
</div>

Вот функции, которые вызывают

function login1() {
    $.mobile.loadPage("#msgpage");
    x = "<div class='ui-block-a'><a href='#payagentpage'><img src='images/quader.png'  ></a></div>"
    $("#mainmenu").append(x);
    x = "<div class='ui-block-b'><a href='#prismapage'><img src='images/prisma.png'></a></div>"
    $("#mainmenu").append(x);
    x = "<div class='ui-block-c'><a href='#pyramidpage'><img src='images/pyramid.png'></a></div>";
    $("#mainmenu").append(x);
    x = "<div class='ui-block-a'><a href='#pyramidenstumpf'><img src='images/pyramidenstumpf.png'></a></div>";
    $("#mainmenu").append(x);
    x = "<div class='ui-block-b'><a href='#zylinder'><img src='images/zylinder.png'></a></div>"
    $("#mainmenu").append(x);
    x = "<div class='ui-block-c'><a href='#hohlzylinder'><img src='images/hohlzylinder.png'></a></div>"
    $("#mainmenu").append(x);
    x = "<div class='ui-block-a'><a href='#kegel'><img src='images/kegel.png'></a></div>"
    $("#mainmenu").append(x);
    x = "<div class='ui-block-b'><a href='#kegelstumpf'><img src='images/kegelstimpf.png'></a></div>";
    $("#mainmenu").append(x);
    x = "<div class='ui-block-c'><a href='#kugel'><img src='images/kugel.png'></a></div>";
    $("#mainmenu").append(x);
    x = "<div class='ui-block-a'><a href='#kugelzone'><img src='images/kugelzone.png'></a></div>";
    $("#mainmenu").append(x);
    x = "<div class='ui-block-b'><a href='#kugelsektor'><img src='images/kugleAuss.png'></a></div>";
    $("#mainmenu").append(x);
    x = "<div class='ui-block-c'><a href='#kugelsegment'><img src='images/kugleAuss.png'></a></div>";
    $("#mainmenu").append(x);
    x = "<div class='ui-block-a'><a href='#tetraeder'><img src='images/tetraeder.png'></a></div>";
    $("#mainmenu").append(x);
    x = "<div class='ui-block-b'><a href='#hexaeder'><img src='images/wurefell.png'></a></div>";
    $("#mainmenu").append(x);
    x = "<div class='ui-block-c'><a href='#oktaeder'><img src='images/oktaeder.png'></a></div>";
    $("#mainmenu").append(x);
    x = "<div class='ui-block-a'><a href='#dodekaeder'><img src='images/dodekaeder.png'></a></div>";
    $("#mainmenu").append(x);
    x = "<div class='ui-block-b'><a href='#ekotaeder'><img src='images/last.png'></a></div>";
    $("#mainmenu").append(x);
    $.mobile.changePage("#homepage", 'slide');
}

function login() {
    $.mobile.loadPage("#msgpage");
    y = "<div class='ui-block-a'><a href='#one'><img src='images/one1.png'></a></div>"
    $("#mainmenu").append(y);
    y = "<div class='ui-block-b'><a href='#two'><img src='images/two1.png'></a></div>"
    $("#mainmenu").append(y);
    y = "<div class='ui-block-c'><a href='#three'><img src='images/three1.png'></a></div>";
    $("#mainmenu").append(y);
    y = "<div class='ui-block-a'><a href='#four'><img src='images/four1.png'></a></div>";
    $("#mainmenu").append(y);
    y = "<div class='ui-block-b'><a href='#five'><img src='images/five1.png'></a></div>"
    $("#mainmenu").append(y);
    y = "<div class='ui-block-c'><a href='#six'><img src='images/six1.png'></a></div>"
    $("#mainmenu").append(y);
    y = "<div class='ui-block-a'><a href='#seven'><img src='images/seven1.png'></a></div>"
    $("#mainmenu").append(y);
    y = "<div class='ui-block-b'><a href='#eight'><img src='images/eight1.png'></a></div>";
    $("#mainmenu").append(y);
    y = "<div class='ui-block-c'><a href='#nine'><img src='images/nine1.png'></a></div>";
    $("#mainmenu").append(y);
    y = "<div class='ui-block-a'><a href='#ten'><img src='images/ten.png'></a></div>";
    $("#mainmenu").append(y);
    y = "<div class='ui-block-b'><a href='#eleven'><img src='images/eleven.png'></a></div>";
    $("#mainmenu").append(y);
    y = "<div class='ui-block-c'><a href='#twelve'><img src='images/twelve.png'></a></div>";
    $("#mainmenu").append(y);
    y = "<div class='ui-block-a'><a href='#sixteen'><img src='images/sxteen.png'></a></div>";
    $("#mainmenu").append(y);
    y = "<div class='ui-block-b'><a href='#seventeen'><img src='images/seventeen.png'></a></div>";
    $("#mainmenu").append(y);
    y = "<div class='ui-block-c'><a href='#fifteen'><img src='images/fifteen.png'></a></div>";
    $("#mainmenu").append(y);
    $.mobile.changePage("#homepage", 'slide');
}

Вот объявление listview:

$("#homepage").bind("pagecreate", function() {
  $("#mainmenu").listview();
});