商品页如何实现元素存在检测并按类名移除DOM，解决JS执行报错

报错根因 #

• 触发Uncaught TypeError的核心原因：document.contains() 方法要求入参为单个DOM节点，但document.getElementsByClassName() 返回的是HTMLCollection类数组对象，不满足Node类型要求，直接传入就会抛出类型错误。
• 其他未暴露的执行问题：
  • getElementsByClassName 返回的是类数组集合，不是单个节点，无法直接调用.remove()方法
  • else分支中的empty()为未定义方法，执行到else逻辑时会触发未定义报错，无对应业务需求可直接删除该分支

原生JS实现方案 #

优先通过id选择器匹配目标节点，避免同class元素误操作：

// 匹配单个目标节点
const ratingEl = document.querySelector('.product-review-rating');
const tsWidgetEl = document.querySelector('#ts_product_widget_position');

// 仅当两个元素都存在时执行删除
if (ratingEl && tsWidgetEl) {
  tsWidgetEl.remove();
}

若需兼容不支持querySelector的老旧浏览器，可替换为以下写法：

const ratingList = document.getElementsByClassName('product-review-rating');
const tsWidgetList = document.getElementsByClassName('product-detail-trustedshops-reviews');

if (ratingList.length > 0 && tsWidgetList.length > 0) {
  tsWidgetList[0].remove();
}

jQuery实现方案 #

// 评分元素存在时执行Trustedshops组件删除
if ($('.product-review-rating').length) {
  $('#ts_product_widget_position').remove();
}

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