I want to delete the last append when i click the back button. but when Im choosing appending again,the last append still there.

this is my codes on appending. its working:

$(req.responseText).find('ItemName').each(function () { ItemNameArr[ItName] = $(this).text(); ItName++; }) $(req.responseText).find('ItemQty').each(function () { ItemQtyArr[ItQty] = $(this).text(); ItQty++; }) $(req.responseText).find('ItemUnit').each(function () { ItemUnitArr[ItUn] = $(this).text(); ItUn++; }) for (var a = 0; a < ItemNameArr.length; a++) { //$contentDt = $('<p><h6> ' + ItemQtyArr[a] + " " + ItemUnitArr[a] + " " + ItemNameArr[a] + '</h6></p>');  $('#Ingredients').append('<p><h6> ' + ItemQtyArr[a] + " " + ItemUnitArr[a] + " " + ItemNameArr[a] + '</h6></p>') $('#Ingredients').fieldcontain('refresh') }

My codes in back button when its click:

 $("#btnBack").on('click',function(){ $('#Ingredients').empty() $('#Ingredients').fieldcontain('refresh') });

My codes in html when it was append

<div data-role="fieldcontain" id="Ingredients"> <!--Ingridients--> </div> });