如何在追加AJAX响应前移除指定HTML元素？

嘿，你的思路其实是对的，但漏掉了关键一步——你没有把移除footer后的DOM对象重新赋值回articles变量，所以原来的HTML字符串根本没变化，追加到页面的还是带footer的版本！

另外还要注意一个细节：如果<footer>是articles里的顶级元素（不是某个父元素的子元素），那用find()是找不到的，得用filter()，因为find()只会查找后代元素，而filter()会筛选当前集合里的元素。

给你修改后的完整代码：

$.ajax({ 
    url: 'http://url-to-the-site.com', 
    dataType: 'json', 
    type: 'GET', 
    data: {}, 
    success: function(data){ 
        for( x in data ){ 
            // 1. 把HTML字符串转换成可操作的jQuery DOM对象
            var $articles = $(data[x].html); 
            // 2. 移除footer元素：同时覆盖后代和顶级footer的情况
            $articles.find('footer').addBack('footer').remove();
            // 3. 把处理后的DOM对象转回HTML字符串
            var processedArticles = $articles.html();
            // 4. 追加到页面
            $(".appender").before(processedArticles); 
        } 
    }, 
    error: function(data){ 
        console.log(data); 
    } 
});

关键步骤解释： #

• $(data[x].html)：把原始HTML字符串转换成jQuery DOM对象，这样才能用jQuery的DOM操作方法处理它。
• $articles.find('footer').addBack('footer').remove()：
  • find('footer')：查找所有后代中的footer元素
  • addBack('footer')：把当前集合里的顶级footer元素也纳入移除范围（避免漏删）
  • remove()：彻底移除匹配到的所有footer元素
• $articles.html()：将处理后的DOM对象转回HTML字符串，这样才能正常追加到页面中。

如果能确定footer只是后代元素，也可以简化成$articles.find('footer').remove();，但加上addBack能覆盖所有场景，更稳妥。

内容的提问来源于stack exchange，提问作者Rooz Far