如何用JavaScript移除DIV标签内元素的CSS类？代码失效求助

你的代码里主要有两个问题：一是DOM方法拼写不完整（document.getEleme...应该是完整的选择器方法），二是没有正确调用移除CSS类的API。以下是修正后的完整实现，以及关键要点说明：

修正后的完整代码 #

<style>
.removeInputBorder {
  border: none;
}
</style>
</head>
<body>
<button onclick="myFunction()">Try it</button>
<div id="myDIV">
  This is a DIV element.
  <input type="text" value="shakeer" class="removeInputBorder"/>
</div>
<script>
function myFunction() {
  // 先选中父级DIV元素
  const parentDiv = document.getElementById('myDIV');
  // 在DIV内精准找到目标input元素
  const targetInput = parentDiv.querySelector('input');
  
  // 确认找到元素后，移除指定CSS类
  if (targetInput) {
    targetInput.classList.remove('removeInputBorder');
  }
}
</script>

关键说明 #

• 精准选中目标元素：通过document.getElementById('myDIV')定位父级DIV，再用querySelector('input')锁定DIV内部的input，避免误操作页面其他input元素
• 安全移除CSS类：使用classList.remove('类名')是现代浏览器的推荐方式，它只会移除指定类，不会影响元素上的其他CSS类
• 容错处理：添加if (targetInput)判断，防止因找不到元素导致JS报错

兼容旧浏览器的备选方案（仅需兼容老版本时使用） #

如果需要支持IE9及更早版本，可以用字符串替换的方式修改className：

function myFunction() {
  const parentDiv = document.getElementById('myDIV');
  const targetInput = parentDiv.querySelector('input');
  
  if (targetInput) {
    // 用正则匹配并移除指定类，trim()清除多余空格
    targetInput.className = targetInput.className.replace(/\bremoveInputBorder\b/g, '').trim();
  }
}

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