动态添加的遮罩层，第一次执行display:none有效，当再次执行的时候失效

在js中动态给页面添加遮罩层，当点击“是”按钮的时候，遮罩层消失，还停留在当前页面，当点击“否”按钮的时候，则跳转到别的页面

问题：当第一次执行点击“是”按钮的时候，遮罩层会消失；第二次点击“是”按钮的时候，代码有执行，但是遮罩层没有消失

js部分代码：

       //点击提示框的“是“按钮事件，将添加的背景和提示框从body中移出
	clickYesBtn = function(){
		$('#bg').css("display","none");
		$('#modal_msg').css("display","none");
		// $('#bg').remove();
		// $('#modal_msg').remove();
		//先删除已经初始化的推荐时间和可发红包数
		// $('#recommendTime').empty();
		// $('#RedBagMaxNum').empty();
		
		// 清掉定时器
		clearTimeout(timerFlag);
	    // requestAndShowData();
	}

	//点击提示框的”否“按钮事件
	clickNoBtn = function(){
		// 清掉定时器
		clearTimeout(timerFlag);
		location.href = '../activity/red_bag_record.html';
	}

	// 提示框
	function modal_msg() {
	    // 提示时候的遮罩层 ,css在commonUtil.css中
	    var bgbackground = '<div id="bg">' + '</div>';
	    $("body").append(bgbackground);
	    // 提示框
	    var alert_content = '<div id="modal_msg">' + '<p class="p3"> 添加成功，是否接著添加紅包 </p>' +
	        '<button class="p4" id="yesBtn" οnclick="clickYesBtn();">是</button>' + '<button id="noBtn" οnclick="clickNoBtn();" class="p4" style="margin-left: 61px;"> 否 </button>' + '</div>';
	    $("body").append(alert_content);
	}

分析：从函数modal_msg()可以看出每次执行js代码的时候，都会给body里面增加id分别为bg、modal_msg的子元素，当第一次执行clickYesBtn()函数的时候，能达到遮罩层和提示框消失的效果。当在界面不刷新的情况下，再次执行函数modal_msg()和clickYesBtn()，却达不到刚刚的效果。

原因：在函数clickYesBtn()里面，设置id分别为bg、modal_msg的元素的属性为display:none，当再次执行函数modal_msg()的时候，就会在Body里面再次添加遮罩层和提示框

。而在html里面每个元素都只有唯一一个id，也就是同一个id名只能出现一次，而上面的代码，每执行一次，就会往Body里面增加具有同id的元素，所以就会产生上面的bug。

解决方法：函数里面执行移除添加元素的功能，将clickYesBtn()修改为下面：

	//点击提示框的“是“按钮事件，将添加的背景和提示框从body中移调
	clickYesBtn = function(){
		// $('#bg').css("display","none");
		// $('#modal_msg').css("display","none");
		$('#bg').remove();
		$('#modal_msg').remove();
		//先删除已经初始化的推荐时间和可发红包数
		// $('#recommendTime').empty();
		// $('#RedBagMaxNum').empty();
		
		// 清掉定时器
		clearTimeout(timerFlag);
	    // requestAndShowData();
	}

总结：如果通过动态给页面添加元素的话，且给元素设置固定的id，并且对相应的元素有点击事件处理的话，那在执行相关事件处理的同时，应该将这些动态添加的元素给move掉，而不是设置属性display:noen