jQuery动态添加和删除div

Html

Css

.added {
	display:flex;
	flex-direction:column-reverse;
}

(function() {
    $('#selectId').change(function() {
        var option = $('#selectId option:selected').val();
        if (option == '有') {
            $('.indexinput').hide()
            $('.manyinput').show()
        } else {
            $('.indexinput').show()
            $('.manyinput').hide()
        }
    })
    // 点击第一个添加按钮
    $('.add').on('click', function() {
        console.log($(this))
        $(this).hide()
        var html = ''
        html += `<div class="inputflexdown active">
                            <input class="inputvalue" type="text">
                            <button class="down">-</button>
                            <button class="addmany">+</button>
                        </div>`
        $('.added').prepend(html)
    })

$(document).on('click', '.active>.addmany', function() {
        $(this).hide()
    })

// 添加第二个以后的添加按钮
    $(document).on('click', '.inputflexdown>.addmany', function() {
        $(this).parent().siblings('.active').find('.addmany').hide()
        $(this).parent().siblings('.added>.inputflexdown').find('.addmany').hide()
        // $(this).hide()
        var html = ''
        html += `<div class="inputflexdown active">
                            <input class="inputvalue" type="text">
                            <button class="down">-</button>
                            <button class="addmany">+</button>
                        </div>`
        $('.added').prepend(html)
    })
    // 删除
    $(document).on('click', '.inputflexdown>.down', function() {
        var downObj = $('.added .down')
        var inputflexdown = $('.inputflexdown')
        var downArr = Array.from(downObj)
        for (var j = 0; j < downObj.length; j++) {
            if (j == 0) {
                $(downArr[j]).addClass('downHtml')
                if ($(this).hasClass('downHtml')) {
                    $(downArr[1]).siblings('.addmany').show()
                }
            }

}
        // 删除元素
        $(this).parent().remove()
        // 当删除完之后，第一个加号显示
        var addHtml = $('.added').html()
        if (addHtml == '') {
            $('.add').show()
        }
    })
})()

↑上面代码改变，会自动显示代码结果 jQuery调用版本：2.1.4

立即下载

jQuery动态添加和删除div

代码描述：简单实用的动态添加和删除div代码

更新时间：2020-08-20 00:38:16

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

JavaScript

相关代码

jQuery动态添加和删除div

最新