尝试在 jquery 中删除类失败答案

【问题标题】：Attempt to removeClass in jquery fails尝试在 jquery 中删除类失败
【发布时间】：2017-01-24 07:10:09
【问题描述】：

我正在尝试从此 HTML 代码中删除 div1 和 intro 类。

片段示例：

$(function() {
  $('div').on('click', function() {
    alert("Hello");
    $("div").removeClass("div1");
    $("p").removeClass("intro");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div1">div 1</div>
<div class="div2">div 2</div>
<div class="div3">div 3</div>
<div class="div4">div 4</div>
<p class="intro">This is a paragraph.</p>
<p class="intro">This is another paragraph.</p>

现在，当我单击 div 时，我会收到 hello 警报，但不会删除 div1 和 intro 类。关于我可能在这里遗漏的任何建议？

更新：我应该一直使用 remove 而不是 removeClass。 Fiddle sample。

【问题讨论】：

intro 类在这个fiddle 中被删除了。 div1 类不会被删除，因为您的目标是 p 元素，这些元素都没有 div1 类。
抱歉，我尝试删除它。这是更新的代码
您是否要让元素从显示中消失？ removeClass() 不会那样做。你只想要remove()。
是的，我试图让它们消失
你是想让被点击的元素消失，还是让所有带有类 div 和 intro 的东西消失？

标签： jquery html removeclass

【解决方案1】：

问题似乎是remove 和removeClass 之间的误解。 OP 想从 DOM 中删除一个元素，因此应该使用 remove()，而不是想使用 removeClass() 删除类

jsfiddle

【讨论】：

您能再解释一下您的问题吗？在 jsfiddle 中，如果单击 div，intro 类和 div1 类都会被删除。你想达到什么目的？我可能没有正确理解您的问题。
它没有在我的窗口中被删除
点击什么时没有删除什么？只有当您单击四个divs 之一时，这两个类才会被删除。您的控制台中是否有任何错误？
当我点击 div 然后 div1 和介绍类应该被删除
我已经更新了 fiddle，在您单击 div 时删除了类的背景颜色。如果问题仍然存在，请打开您的开发者工具并在控制台中报告和错误。

【解决方案2】：

如果您要从 DOM 中删除元素，请像这样运行脚本：

$('div').on('click',function(){
    alert("Hello");
    $(".div1").remove();
    $(".intro").remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div1">div 1</div>
<div class="div2">div 2</div>
<div class="div3">div 3</div>
<div class="div4">div 4</div>
<p class="intro">This is a paragraph.</p>
<p class="intro">This is another paragraph.</p>

removeClass('intro1') 将从对象中删除 intro 类属性。 remove() 是将其从 DOM 本身中删除的函数。

【讨论】：

是的，但我的问题是为什么我的代码不起作用？我做错了吗？
感谢您协助 jquery 中的删除功能。好像我在使用 removeClass 这是错误的，应该使用 remove

【解决方案3】：

您正在选择 p 元素并尝试删除 div 上的 div1 和 div2 类：

$(function() {
  $('div').on('click', function() {
    
    $("div").removeClass(function (index, className) {
      return (className.match (/div[0-9]/g) || []).join(' ');
    });
    $("p").removeClass("intro");
  });
});

.div1, .div2, .div3, .div4 {
    border: 1px solid red;
  }

.intro {
  color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div1">div 1</div>
<div class="div2">div 2</div>
<div class="div3">div 3</div>
<div class="div4">div 4</div>
<p class="intro">This is a paragraph.</p>
<p class="intro">This is another paragraph.</p>

【讨论】：

你的代码和小提琴不匹配，我错过了什么吗？