动态生成带删除样式的框

2024-07-05 13:37:21



<div id="fujian2"></div>





var code = Math.floor(Math.random() * (100 + 1));

 $("#fujian2").append(

 '<div class="select-div" id="' + code + '">' +

 '<input type="hidden" name="fujian[]" value="' + res.name + '|' + res.path + '">' +

 '<a href="' + res.path + '" target="_blank" >' + res.name + '</a>' +

  '<button type="button" class="layui-btn layui-btn-primary layui-btn-sm  close-btn2"' +

 'onclick="delete_div(' + code + ')"><i class="layui-icon">&#x1006;</i></button>' +

 '</div>'

 );





//删除div

function delete_div(code) {

      $('#' + code).remove();

}






/*带删除选择框*/

.select-div{

    border: 1px solid #1e9fff;

    border-radius: 10px;

    width:fit-content;

    padding: 5px;

    margin-right: 5px;

}


.select-div, .select-div{

    display: inline-block;

    /* 将div和button设置为内联块级元素 */

    vertical-align: top;

}


.close-btn2{

    border: 0;

    border-color: #d2d2d2;

    height: 30px;

    line-height: 20px;

    padding: 0;

    font-size: 12px;

}