jQuery获取元素HTML并修改删除指定类或元素时代码不生效如何解决？

原有代码的三个核心问题 #

• removeClass的参数不需要加类选择器前缀.，传入'.single-col'无法匹配到要移除的类名
• 你直接对$(html)生成的临时DOM对象操作，修改结果没有回写到原有的html字符串变量，输出的还是初始的未修改内容
• 两次调用$(html)生成了两个独立的临时DOM对象，两次操作分别作用在不同对象上，修改无法叠加

可直接运行的修复后代码 #

$('button').click(function(){
  // 创建临时容器存储要处理的DOM，避免修改页面原有渲染内容
  const $tempWrapper = $('<div>').append($('.wrapper-container').clone());
  // 移除指定类名
  $tempWrapper.find('.single-col').removeClass('single-col');
  // 移除无用p标签
  $tempWrapper.find('p').remove();
  // 导出处理完成的HTML字符串
  const cleanedHtml = $tempWrapper.html();
  console.log(cleanedHtml);
})

运行后输出的处理结果为：

<div class="">Hello</div>
<div class="">World</div>

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