在jQuery中如何实现动态控制页面元素

//添加用户为自己常用好友
function Add(e) {
 var friend_id = e.id;
 var name = $("#" + friend_id).html();
 //将要插入页面的好友html代码
 var content = "<p id=\"friend" + friend_id + "\" class=\"case-item\" onclick=\"" + game_type + "(this)\"><p class=\"ih-item circle effect1\"><a href=\"#\"><img class=\"img_wrong\" src=\"image/wrong.png\" style=\"float: right; width: 15px; height: 15px;display:none\" /><p class=\"spinner\"></p><p class=\"img\"><h3 id=\"" + friend_id + "\">" + name + "</h3></p><p class=\"info\"><p class=\"info-back\"><h3 class=\"info-word\">" + info_word + "</h3></p></p></a></p></p>";
 //向数据库添加，通过结果来确定界面显示
 $.ajax({
 url: "userlist.aspx/AddFriend",
 data: "{'username':'" + $('#username').text() + "','friend_id':'" + friend_id + "'}",
 type: 'Post',
 contentType: "application/json; charset=utf-8",
 dataType: "json",
 success: function (result) {
 if (result.d == "true") {
 $(".case-content").append(content);//数据库添加成功，插入html代码
 }
 else {
 alert(result.d);
 }
 },
 error: function (err) {
 alert("未知错误");
 }
 });
}
//删除好友
function Delete(e) {
 var friend_id = e.id;
 $.ajax({
 url: "userlist.aspx/DeleteFriend",
 data: "{'username':'" + $('#username').text() + "','friend_id':'" + friend_id + "'}",
 type: 'Post',
 contentType: "application/json; charset=utf-8",
 dataType: "json",
 success: function (result) {
 if (result.d == true) {
 $("#" + friend_id).remove();//在界面移除好友
 }
 if (result.d == false) { alert("删除失败"); }
 },
 error: function (err) {
 alert("未知错误");
 }
 });
}
//重置好友-切换到删除模式
function ChangeToDelete() {
 $(".case-item").removeAttr("onclick");//删除onclick事件
 $(".case-item").attr("onclick", "Delete(this);");//添加新的onclick事件
 $(".img_wrong").css("display", "block");//使删除图标可见
 $(".info-word").html("删除");//改变提示文字
}
//关闭重置-切换到正常模式
function ChangeToNormal() {
 $(".case-item").removeAttr("onclick");//删除onclick事件
 $(".case-item").attr("onclick", "");//添加新的onclick事件
 $(".img_wrong").css("display", "none");//使删除图标不可见
 $(".info-word").html(info_back);//恢复提示文字
}