スパン要素のクラスを削除できません

Question

"bg-color-disable"#filenameRPTのクラスを削除しようとしていますが、何も試してみませんでした。 $("#parentRPT > span#filenameRPT").removeClass("bg-color-disable");と$("#filenameRPT").removeClass("bg-color-disable");を使用しましたが運がありません。何か案が？

<div class="two-row mb-3"> 
    <div id="parentRPT" class="input-group bg-color-disable"> 
    <span class="input-group-addon gi data-gi-size gi-file-plus"></span> 
    <span id="filenameRPT" class="bg-color-disable"> 
     Upload REPORT 
    <span class="fa fa-arrow-circle-right text-primary ml-1 mr-1"></span> 
     <a name="rpt" href="#">No File Exists</a 
     <input class="hidden" name="delete_RPT" value="not_deleted" type="text"/> 
    </span> 
    <span id="deleteRPT" class="fa fa-times text-danger hidden" title="Delete"></span> 
    <label class="input-group-addon has-float-label" for="file-uploadRPT"> 
     Browse 
     <input id="file-uploadRPT" name="FileToUploadRPT" type="file" accept="application/pdf"> 
    </label> 
    </div> 
</div> 

クレイジーなことは、私は#parentRPTが$("#parentRPT").removeClass("bg-color-disable");を使用しますが要素#filenameRPTのために動作しませんでした$("#filenameRPT").removeClass("bg-color-disable");を使用するための「BG-色-無効」を削除することができたです。どうして？

Answer 1

あなたの問題は、アンカータグが不適切に閉じることです。 クラスを削除するのは簡単です。

window.onload = removeClass() 
 

 
function removeClass() { 
 
    console.log('before removal',document.getElementById('filenameRPT').classList); 
 
    document.getElementById('filenameRPT').classList.remove('bg-color-disable') 
 
    console.log('after removal',document.getElementById('filenameRPT').classList); 
 
}

<div class="two-row mb-3"> 
 
    <div id="parentRPT" class="input-group bg-color-disable"> 
 
    <span class="input-group-addon gi data-gi-size gi-file-plus"></span> 
 
    <span id="filenameRPT" class="bg-color-disable"> 
 
     Upload REPORT 
 
    <span class="fa fa-arrow-circle-right text-primary ml-1 mr-1"></span> 
 
     <a name="rpt" href="#">No File Exists</a> 
 
     <input class="hidden" name="delete_RPT" value="not_deleted" type="text"/> 
 
    </span> 
 
    <span id="deleteRPT" class="fa fa-times text-danger hidden" title="Delete"></span> 
 
    <label class="input-group-addon has-float-label" for="file-uploadRPT"> 
 
     Browse 
 
     <input id="file-uploadRPT" name="FileToUploadRPT" type="file" accept="application/pdf"> 
 
    </label> 
 
    </div> 
 
</div>