如何在文本框更改时将ul li添加到div并使用Jquery从div中删除ul li

时间:2016-11-09 13:34:09

标签: jquery html-lists

我有一个表单,在文本框更改事件中我需要使用文本框文本创建ul和li,如果用户想要删除添加的项目,则用户应该能够使用一个确认删除。

我能够在jquery下面添加ul和li,但我想知道如何从div中删除特定的(用户想删除的项目)ul和li。

<div id="divDynamic"></div>

$('#txtItem').blur(function () {
        var addedItems = [];
        var text = $(this).val();
        if ($('li:contains(' + text + ')').length === 0) {
            var _tempUL = $('<ul/>').addClass('navlist');
            $("#divDynamic").append(_tempUL);
            var liText = $('<li/>').addClass('btn-gradient').html(text);
                _tempUL.append(liText);
                _tempUL.append('<li class="close"><a href="#"><img src="/Images/close.png" /></a></li>');
            addedItems.push(text);
          }
    });

有人请帮助我。提前致谢

1 个答案:

答案 0 :(得分:1)

您需要替换以下行

_tempUL.append('<li class="close"><a href="#"><img src="/Images/close.png" /></a></li>');

_tempUL.append('<li class="close"><a href="#" class="removeLi"><img src="/Images/close.png" /></a></li>');

然后把这个jQuery代码

$(document).on( 'click', '.removeLi', function() {

    $(this).parent().prev('li.btn-gradient').remove();
    $(this).parent().remove();

});