jquery 清空动态append添加元素,remove方法

最新推荐文章于 2023-06-14 10:17:51 发布

转载最新推荐文章于 2023-06-14 10:17:51 发布

· 3k 阅读

1 ·

版权

原文链接：http://www.cnblogs.com/simpledev/p/3517462.html

文章标签：

#javascript #c# #ViewUI

在使用jQuery时，遇到一个问题：通过append方法动态添加的元素无法使用remove方法删除。解决办法是确保在拼接完字符串后一次性调用append方法，这样id选择器才能正确识别并移除元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
    <head>
        <script type="text/javascript" src="jquery-1.9.1.js"></script>
    </head>
<body>
    <div>
        <ul>
            <li id="pp"><a href="#" name="lifan" onclick="frush();" >力帆</a></li>
        </ul>
    </div>
</body>

<script type="text/javascript">
    
    function frush(){
        
        var html = $("div #nf").html();
        alert(html);
        $("div #nf").remove();  //移出,避免重复添加.
        
        var ss = "<ul id='nf'>";
        var ss2 = "<li><a href='#'>2013款</a>";
        var ss3 = "<li><a href='#'>2014款</a></li>";
        var ss4 = "</ul>";
        var ss5 = ss+ss2+ss3+ss4; 
        
        /**写成下面这样,找不到id=nf对象,导致无法remove,重复添加~! huangjing 140110**/
            /*$("#pp").append(ss);
            $("#pp").append(ss2);
            $("#pp").append(ss3);
            $("#pp").append(ss4);*/
            
        $("#pp").append(ss5);
                
    }
</script>

</html>