如果我们只知道className的一部分，如何删除className？

Question

例如 - 我只有下一行代码，如果span包含从class开始的outcome--active JS，我需要重新编码。如果是这样 - 通过<span class="outcome___259Az outcome--active___1Ffc-"></span> 删除它。

document.querySelector('[class^="outcome"]').classList.remove(/outcome--active/g)

我们如何才能做到这一点？

我接下来尝试了，但它不起作用：

DECLARE @tbl TABLE (XmlCol xml)
INSERT INTO @tbl VALUES 
('<option>
            <OptionName>Option 1</OptionName>
            <grant>
                    <GrantName>Grant 1</GrantName>
                            <schedules>
                                            <schedule>
                                                            <scheduleID></scheduleID>
                                                            <scheduleName></scheduleName>
                                                            <scheduleDate>1/1/2018</scheduleDate>
                                                            <scheduleAmount></scheduleAmount>
                                            </schedule>
                                            <schedule>
                                                            <scheduleID></scheduleID>
                                                            <scheduleName></scheduleName>
                                                            <scheduleDate>2/1/2018</scheduleDate>
                                                            <scheduleAmount></scheduleAmount>
                                            </schedule>
                                            <schedule>
                                                            <scheduleID></scheduleID>
                                                            <scheduleName></scheduleName>
                                                            <scheduleDate>3/1/2018</scheduleDate>
                                                            <scheduleAmount></scheduleAmount>
                                            </schedule>
                            </schedules>
            </grant>
            <grant>
                            <GrantName>Grant 2</GrantName>
                            <schedules>
                                            <schedule>
                                                            <scheduleID></scheduleID>
                                                            <scheduleName></scheduleName>
                                                            <scheduleDate>1/1/2019</scheduleDate>
                                                            <scheduleAmount></scheduleAmount>
                                            </schedule>
                                            <schedule>
                                                            <scheduleID></scheduleID>
                                                            <scheduleName></scheduleName>
                                                            <scheduleDate>2/1/2019</scheduleDate>
                                                            <scheduleAmount></scheduleAmount>
                                            </schedule>
                                            <schedule>
                                                            <scheduleID></scheduleID>
                                                            <scheduleName></scheduleName>
                                                            <scheduleDate>3/1/2019</scheduleDate>
                                                            <scheduleAmount></scheduleAmount>
                                            </schedule>
                            </schedules>
            </grant>
        </option>'
)



SELECT e.XmlCol.value('(/option/OptionName)[1]', 'varchar(100)'),
        t.x.value('../.././GrantName[1]','varchar(100)') GrantName,
       t.x.value('(./scheduleDate)[1]', 'varchar(100)') scheduleDate
 FROM @tbl e
    cross apply e.XmlCol.nodes ('/option/grant/schedules/schedule') t(x)

Answer 1

很遗憾，根据MDN docs，options: { maintainAspectRatio: false, responsive: true, scales: { yAxes: [{ ticks: { beginAtZero: true, } }] }, plugins: { datalabels: { anchor: 'end', align: 'top', formatter: Math.round, font: { weight: 'bold' } } } } 方法需要 <element>.classList.remove() 参数，并且它不接受 <string> < / em>的。

所以你可以通过删除以<RegExp>开头的类来简单地替换元素的整个className

outcome--active<something>

  

Codepen demo

Answer 2

使用以下函数，您可以通过从类列表中了解该类名的一部分来删除所需的类：

function removeClassByString( part ) {
    var elements = document.getElementsByTagName( 'span' );

    for ( var i = 0; i < elements.length; i++ ) {
        var classList = elements[i].className.split( ' ' );
        var count = classList.length;

        for ( var j = 0; j < count; j++ ) {
            if ( classList[j].search( part ) != -1 ) {
                delete classList.splice( j, 1 )
            }
        }

        if ( count != classList.length ) {
            var el = document.createElement( 'i' );
            el.innerText = '         (class removed!)'
        } else {
            var el = document.createElement( 'i' );
            el.innerText = '  (no change)'
        }

        elements[i].appendChild( el );

        elements[i].className = classList.join( ' ' )
    }
}

span {
    display: block;
    font: normal 1em "Lucida Console", Monaco, monospace
}
i {
    color: green
}
.outcome--active___1Ffc- {
    color: red
}

<span class="outcome--active___1Ffc-">The phrase exists in the class name.</span>
<span class="outcome___259Az">The phrase does'nt exist in the class name.</span>
<span class="outcome___259Az outcome">The phrase does'nt exist in the class name.</span>
<span class="outcome___259Az outcome--active___1Ffc-">The phrase exists in the class name.</span>
<br />
<input name="" type="button" value="Remove Class" onclick="removeClassByString( 'outcome--active' )" />

Answer 3

你可以这样做。

1. 将您的班级拆分为数组
2. 如果特定类可用，则使用javascript some方法测试。
3. 如果可用，则删除该元素。
＆＃13;
＆＃13;
if(document.querySelector('[class^="outcome"]').className.split(' ').some(c => /outcome--/g.test(c) )) {
    document.querySelector('[class^="outcome"]').remove();
}
＆＃13;
<span class="outcome___259Az outcome--active___1Ffc-">test</span>
＆＃13;
＆＃13;
＆＃13;

Answer 4

<span class="outcome___259Az outcome--active___1Ffc-"></span>

<script>

// List with span's classes
var classList = document.querySelector('[class^="outcome"]').classList;

//  List with classes to remove
var removeClassList = [];

//  Get classes that matches with regexp
classList.forEach( function(value) {
    var result = /([^ ]*)(outcome--active)([^ ]*)/g.test(value);
  if(result){
    removeClassList.push(value);
  }
});

//  Remove classes that matches with regexp from span
removeClassList.forEach( function(value) {
    document.querySelector('[class^="outcome"]').classList.remove(value);
});
</script>