jquery 动态追加html，如何操作添加的动态html？

<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="http://apps.bdimg.com/libs/bootstrap/2.3.2/css/bootstrap.min.css">
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/bootstrap/2.3.2/js/bootstrap.min.js"></script>
</head>
<body>
    <button class="btn btn-large" type="button">Large button</button>
<ol id="ssss">

</ol>



<script type="text/javascript">
    $("button[type='button']").click(function(){
        $("#ssss").append('<li><a href="#">123</a><i class="icon-remove"></i></li>');
    });


    
</script>
</body>
</html>

点击按钮一次添加一个<li><a href="#">123</a><i class="icon-remove"></i></li>

那么如何点击一下<i class="icon-remove"></i>，就可以删除此条的<li></li>里的内容？

刚点进来就发现小秦同学回答了，利用事件冒泡，绑定在动态生成元素的父元素$("#ssss")上就可以了

<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="http://apps.bdimg.com/libs/bootstrap/2.3.2/css/bootstrap.min.css">
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/bootstrap/2.3.2/js/bootstrap.min.js"></script>
</head>
<body>
    <button class="btn btn-large" type="button">Large button</button>
<ol id="ssss">

</ol>



<script type="text/javascript">
    $("button[type='button']").click(function(){
        $("#ssss").append('<li><a href="#">123</a><i class="icon-remove"></i></li>');
    });

    $('#ssss').on('click', 'i.icon-remove', function(e){
       $(this.parentNode).remove();
    });


    
</script>
</body>
</html>

更新: 刚又看了一下你的要求, 你说的是 就可以删除此条的<li></li>里的内容？ 是想清空 LI 里面的内容, 还是想把LI删除掉?

上面的代码是将LI删除掉, 如果你是要清空内容,那么将 remove 改为 empty 即可.

【热门文章】