您当前的位置：学无止境 > Note notes > JS动态添加删除网站首页编程笔记

<div id="tiankong">
    <div id="tkop" style="padding: 0px 0px 10px;">

    </div>
    <div style="cursor: pointer;border-radius: 2rem;color: black;border:1px solid #5578eb;padding: 6px; width: 100px;text-align: center" onclick="addTK();">
        添加选项
    </div>
</div>

var optionStr = ["A","B","C","D","E","F","G","H","I","J"];
var defnum = 0;
function addTK(){
    if(defnum<=9){
        var tkop = "<div style='margin-top: 12px;'>";
        tkop+="<span style='margin-right: 12px;width: 15px;'>"+optionStr[defnum]+"</span><span><input type='text' style='width: 80%;margin-right: 12px;'/></span>"
        tkop+="<a class='picTK" + defnum + "' style='cursor: pointer'>切换为图片</a>"
        /* tkop+="<a class='delTK' style='cursor: pointer'>删除</a>"*/
        tkop+="</div>"
        $('#tkop').append(tkop);

        //input 切换为图片
        $(".picTK"+defnum).click(function(){
            var picstr = "<input type='file' style='width: 80%;margin-right: 12px;'/>";

            $(this).prev().html(picstr);
            $(this).remove();
        })
        //动态添加删除事件
        /*$(".delTK").click(function(){
            $(this).parent().remove();
        })*/

        defnum++;
    }else{
        alert("最多添加十个选项");
    }
}

<div class="input formto">
				<p>物品名称<span>*</span></p>
				<input type="text" class="goodsName" placeholder="请输入物品名称"/>
				<p>物品数量<span>*</span></p>
				<input type="text" class="goodsNum" placeholder="请输入物品数量"/>
				
			</div>
			<div class="input btn">
				<img src="img/btn_add.png" class="add" id="wupingAdd"/>
			</div>

$("#wupingAdd").click(function(){
			var html='<div class="input formto" >'
					+'<div class="del" style="color:blue;">删除</div>'
					+'<input type="text" class="goodsName" placeholder="物品名称" style="width:46%;" />'	
					+'<input type="text" class="goodsNum" placeholder="物品数量" style="width:46%;margin-left:8%;" />'	
							
					+'</div>'
			$(".btn").after(html)

			//动态添加删除事件
			$(".del").click(function(){
				$(this).parent().remove();
			})
		})