实现点击添加对应图片及删除图片

下面要实现的就是点击下方cat、dog、pig、monkey，展示对应的图片，点击图片上的删除按钮，图片删除后，下方对应的恢复初始样式

<div id="wrapper">
	<!-- 图片显示区域 -->
	<div id="viewImg">
		
	</div>
	<!-- 底部点击控制区域 -->
	<ul id="footer">
		<li data-id="cat">cat</li>
		<li data-id="dog">dog</li>
		<li data-id="pig">pig</li>
		<li data-id="monkey">monkey</li>
	</ul>
</div>

/**
 * 声明变量为false，利用其状态值判断是否存在与其对应的图片
 * 若值为false，则添加，
 * 若值为true，则不追加
 * */
 let isCat = false;
 let isDog = false;
 let isPig = false;
 let isMonkey = false;

/**
 * 底部点击li事件
 * 显示对应图片，及点击的li标签添加点击选中样式
 * */
$("#footer li").click(function(e){
	$(e.target).css({"color":"red","borderBottom":"4px solid cyan"})
	
	const currentLi = $(e.target).data("id");
	if(currentLi == "cat"){
		if(!isCat){
			$("#viewImg").append(cat)
			// 将其状态设置为true，表示已存在
			isCat = true;
			/**
			 * 调用删除图片方法
			 * */
			deletImg("cat")
		}else{
			return
		}
		
	}else if(currentLi == "dog"){
		if(!isDog){
			$("#viewImg").append(dog)
			isDog = true;
			deletImg("dog")
		}else{
			return
		}
		
		
	}else if(currentLi == "pig"){
		if(!isPig){
			$("#viewImg").append(pig)
			isPig = true;
			deletImg("pig")
		}else{
			return
		}
		
		
	}else{
		if(!isMonkey){
			$("#viewImg").append(monkey)
			isMonkey = true;
			deletImg("monkey")
		}else{
			return
		}
		
	}
})


/* 四张图片 */
let cat =`<div id="cat">
				<button>X</button>
				<img src="../img/cat.jpg" >
			</div>`	

let dog =`<div id="dog">
				<button>X</button>
				<img src="../img/dog.jpg" >
			</div>`	
			
let pig =`<div id="pig">
				<button>X</button>
				<img src="../img/pig.jpg" >
			</div>`	
			
let monkey =`<div id="monkey">
				<button>X</button>
				<img src="../img/monkey.jpg" >
			</div>`	
		
/**
 * 点击图片右上方删除按钮
 * 删除对应图片，及删除对应图片的li标签恢复初始样式
 * */
function deletImg(ele){
	$(`#${ele} button`).click(function(){
		$("#"+ele).remove()
		
		if(ele === "cat"){
			isCat = false;
		}else if(ele === "dog"){
			isDog = false;
		}else if(ele === "pig"){
			isPig = false;
		}else{
			isMonkey = false;
		}
		
		$.each($("#footer li"),function(index,item){
			if($(item).data("id") === ele){
				$(item).css({
					"borderBottom":"none",
					"color":"#fff"
				})
			}
		})
	})
}