无法在JavaScript中删除数组的元素

Question

我有一部分代码，其中的removeClass函数必须删除数组元素，以防万一他的某些元素与输入参数一致。

但这行不通。

 var obj = { className: 'open menu' }; function removeClass(obj, cls) { var arr = obj.className.split(' '); for (var i = 0; i < arr.Length; i++) { if (cls == arr[i]) delete arr[i] } obj.className = arr.join(' '); return obj.className; } console.log(removeClass(obj, 'open')); // desired output obj.className='menu' // actual output 'open menu' 

Answer 1

您可以为此使用Array.prototype.filter()方法。

var obj = {
  className: 'open menu'
};

function removeClass(obj, cls) {
  var arr = obj.className.split(' ');

  obj.className = arr.filter(function(item) {
    return cls !== item;
  }).join(' ')

  return obj.className;
}

console.log(removeClass(obj, 'open'));

在代码中，您使用了arr.Length 。 实际语法为arr.length 。 但是，即使您随后使用fix代码，它也不会删除该项目，而是将undefined放在其位置，因此您必须处理多余的空格。 这就是为什么我认为上述解决方案很好。

Answer 2

尝试这个：

  var obj = { className: 'open menu dogs cats' }; function removeClass(obj, cls) { return (obj.className = obj.className.split(' ').filter(item => cls !== item).join(' ')); } console.log(removeClass(obj, 'open')); console.log(removeClass(obj, 'dogs')); 

但是，如果您要对DOM元素执行此操作，请改用classList 。

 var el = document.getElementById("mine"); console.log(el.className); el.classList.remove('open'); console.log(el.className); el.classList.remove('dogs'); console.log(el.className); 

 <div id="mine" class="menu open dogs cats"></div> 

Answer 3

为什么不替换字符串呢？

 var obj = { className: 'open menu' }; function removeClass(obj, cls) { return obj.className = obj.className.replace(cls, '').trim() } console.log(removeClass(obj, 'open')); // obj.className='menu' 

另外，在使用DOM时，已经有解决方法

 const b = document.querySelector('button') b.addEventListener('click', () => { b.classList.remove('blue') }) 

 .red { color: red } .blue { color: blue } 

 <button class="red blue">test</button> 

Answer 4

使用ES6，您甚至可以将其做得很短

function removeClass(element, classToRemove) {
    return element.className.split(' ')
                  .filter(class => class !== classToRemove)
                  .join(' ');
}

如果要修改元素本身，只需将返回值重新分配给element.className