后台多级属性添加

                  简单的后台属性添加代码    
				 <style>
					.step {
					    background: #fff;
					    padding: 15px 20px;
					}
					.step_title {
					    border-bottom: 1px solid #e4eaec;
					    line-height: 40px;
					    position: relative;
					}
				 	.step_content {
							    position: relative;
							    width: 100%;
							    padding: 20px 0;
							}
                        .attr_item{
                                width: 100%;
                                height: auto;
                                overflow:hidden;
                                border-bottom:1px solid #e4eaec;
                                margin-top: 20px;
                                padding-bottom: 20px;

                            }
                            .add_attr{
                                    font-size: 16px;
                                    color: #31b4e1;
                                    font-weight: 500;
                                    margin-left: 80px;
                                    cursor: pointer;
                            }
                            .attr_title{
                                font-size: 14px;
                                margin-left: 10px;
                            }
                            .attr_property{
                                font-size: 14px;
                                margin-left: 10px;
                            }
                            .attr_value{
                                font-size: 14px;
                                margin-left: 10px;
                            }
                            .attr{
                                font-size: 14px;
                                margin-left: 80px;
                                margin-top: 10px;
                            }
                            .step_item{
                                display: flex;
                                padding: 0px;
                                padding-top: 10px;
                            }
                            .add_property{
                                font-size: 14px;
                                padding-left: 20px;
                                color: #31b4e1;
                                cursor: pointer;
                            }
                            .del_attr{
                                font-size: 14px;
                                color: #d7000f;
                                margin-left: 20px;
                                cursor: pointer;
                            }
                            .del_property{
                                font-size: 14px;
                                color: #d7000f;
                                margin-left: 20px;
                                cursor: pointer; 
                            }
                        </style>
                        <div class="step">
                            <div class="step_title"><i class="ui-step"></i><h3>商品规格属性</h3></div>
                            <div class="step_content relative" id="attr_content">
                                <div class="add_attr" id="add_attr">+添加规格属性</div>
                                <div class="attr_item">
                                    <label class="attr">
                                    规格属性:<input class="attr_title" type="text" name="attr_title[]" value="规格属性标题"></label><span class="add_property">+添加属性</span><span class="del_property">删除规格属性</span>
                                    <div class="step_item">
                                        <div class="">
                                            <label class="attr">
                                           属&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;性:<input class="attr_property" type="text" name="attr_property_0[]" value="第一个属性"> </label>
                                        </div>
                                        <div class="">
                                            <label class="attr"> 
                                            值:<input class="attr_value" type="text" name="attr_value_0[]" value="第一个属性"></label>
                                        </div>

                                        <div class="del_attr">删除</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <script src="http://www.donglongshangshi.com/plugins/ueditor/third-party/jquery-1.10.2.min.js"></script>
                        <script>
                            $(function(){
                                //添加规格属性标题
                                $("#add_attr").click(function(){
                                    var length = $("#attr_content").find('.attr_item').length;
                                    var html = '<div class="attr_item"><label class="attr">规格属性:<input class="attr_title" type="text" name="attr_title[]" value="规格属性标题"></label><span class="add_property">+添加属性</span><span class="del_property">删除规格属性</span><div class="step_item"><div class=""><label class="attr">属&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;性:<input class="attr_property" type="text" name="attr_property_'+length+'[]" value="请输入属性"> </label></div><div class=""><label class="attr">值:<input class="attr_value" type="text" name="attr_value_'+length+'[]" value="请输入值"></label></div><div class="del_attr">删除</div></div></div>';
                                    $("#attr_content").append(html)
                                })
                                //添加属性与值
                                $("body").on('click','.add_property',function(){
                                    var length = $("#attr_content").find('.attr_item').length -1;
                                    var html = '<div class="step_item"><div class=""><label class="attr">属&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;性:<input class="attr_property" type="text" name="attr_property_'+length+'[]" value="请输入属性"> </label></div><div class=""><label class="attr"> 值:<input class="attr_value" type="text" name="attr_value_'+length+'[]" value="请输入值"></label></div><div class="del_attr">删除</div></div>';
                                    $(this).parent().append(html);
                                })

                                //删除规格属性
                                $('body').on('click','.del_property',function(){
                                    $(this).parent().remove();
                                })

                                //删除属性
                                $('body').on('click','.del_attr',function(){
                                    $(this).parent().remove();
                                })
                            })
                        </script>

效果图

需要自行引入jquery 库哦,