Listview adding another page items also which are not needed

Question

There are two imagebuttons (2d , 3d ) on main page. Each image has separate set of images. Each image calls two different function on click. Each function( page) has same list view (mainpage) and same page(homepage). When I shift from 2d image button to 3d image button, 2d image button inside content also showing in 3d imagebutton inside content. Because I am using on listview only. If there any way so that I can refresh list on calling function login1() or login2(). or any way to remove previous listview added items? I have tried this $("#mainmenu").remove(y); but it's not working.

Here are 2d and 3d images definition in 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>

Here are functions which are calling

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');
}

Here is listview declaration:

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

Answer 1

You can use any of the below to remove previous elements before appending new ones.

$("#mainmenu").empty();

Or, overwrite existing inner elements.

y = "<elements></elements>";
$("#mainmenu").html(y);

.html(y) = .empty() + .append(y).