Javascript 无法删除父div

我正在处理一个项目，在那里我从输入标签中获取一个值，然后将输入值插入div并在屏幕上附加子元素

我想要的是，当用户单击children元素时，父div将被删除，为此我使用了一个函数。默认情况下，当我使用一个节，但当我附加一个节，然后单击该节的子项时，该功能将被删除，但我的功能不起作用

$（'#btn'）。单击（函数（）{
var menuFieldName=$（'#text'）.val（）；
$（'.div'）.append（''+menuFieldName+'X'）；
$（'#text'）.val（''）；
});
$（'.div.a span'）。在（'click'，function（）上{
$（this.parent（）.remove（）；
});
.a{
显示：内联块；
填充：5px35px 5px10px；
位置：相对位置；
背景：#eee；
边界半径：20px；
利润率：10px；
}
.跨度{
位置：绝对位置；
排名：0；
右：0；
背景：#333；
颜色：#fff；
高度：28px；
宽度：28px；
文本对齐：居中；
线高：28px；
边界半径：30px；
}

测试X
添加
您正在动态地附加元素，但没有将任何事件处理程序附加到新添加的元素。要解决此问题，您可以使用事件委派，您可以将事件附加到
.div
上，如
$（'.div'）。在（'click'，'.a span'，function（）{


$（'#btn'）。单击（函数（）{
var menuFieldName=$（'#text'）.val（）；
$（'.div'）.append（''+menuFieldName+'X'）；
$（'#text'）.val（''）；
});
$（'.div'）。on（'click'，'a span'，function（）{
$（this.parent（）.remove（）；
})；
.a{
显示：内联块；
填充：5px35px 5px10px；
位置：相对位置；
背景：#eee；
边界半径：20px；
利润率：10px；
}
.跨度{
位置：绝对位置；
排名：0；
右：0；
背景：#333；
颜色：#fff；
高度：28px；
宽度：28px；
文本对齐：居中；
线高：28px；
边界半径：30px；
}

测试X
添加
无法删除它的原因是，当您注册事件时，您试图注册它的元素还不存在

你需要使用

您必须在append..之后调用click函数，或者全局调用click函数（body元素）并匹配span

$(document).ready(function(){
        $('#btn').on('click',function(){
            var menuFieldName = $('#text').val();
            $('.div').append('<div class="a">'+menuFieldName+'<span class="close">X</span></div>');
            $('.div .a span').on('click', a);
            $('#text').val('');
        });

            $('.div .a span').on('click', a);    
    function a() {
       $(this).parent().remove();
    }
});

$（文档）.ready（函数（）{
$（'#btn'）。在（'click'，function（）上{
var menuFieldName=$（'#text'）.val（）；
$（'.div'）.append（''+menuFieldName+'X'）；
$（'div.a span'）。在（'click'，a'）；
$（'#text'）.val（''）；
});
$（'div.a span'）。在（'click'，a'）；
函数a（）{
$（this.parent（）.remove（）；
}
});

检查你的js提琴。修复了->
谢谢你提供的解决方案：）事实上，我是jquery/javascript的学习者，请帮助我如何在我的系统中使用e.targetcode@Xufox
这个
在这里工作得非常好，它引用了带有X的span元素。@JafaruddeenAnsari为什么要在这里使用e.target？“这个”工作正常，但我只是想问一下@Xufox建议我用“e.target”替换它，并提供“e”作为一个参数，这就是为什么我要问：）@JafaruddeenAnsari我认为你不需要用e.target替换
这个
，它在代码段中正常工作。下一个选项是根据Radioreve建议的事件委派（感谢好友：）以获取知识丰富的信息
$(document).ready(function(){
        $('#btn').on('click',function(){
            var menuFieldName = $('#text').val();
            $('.div').append('<div class="a">'+menuFieldName+'<span class="close">X</span></div>');
            $('.div .a span').on('click', a);
            $('#text').val('');
        });

            $('.div .a span').on('click', a);    
    function a() {
       $(this).parent().remove();
    }
});