HTML DOMTokenList remove() 메서드

CodeW3C 온라인 강의

HTML 시리즈 강의
브라우저 스크립트
서버 스크립트
프로그래밍 강의
XML 시리즈 강의
웹사이트 만들기 매뉴얼
참조 매뉴얼

과목표

JS 참조서적

JS 참조서적(분류순서)
JS 참조서적(알파순서)

JavaScript

JS 배열
JS 보리스
JS 클래스
JS 날짜
JS 오류
JS 글로벌
JS JSON
JS Map
JS Math
JS 숫자
JS Promise
JS RegExp
JS Set
JS 문자열
JS 객체
JS 연산자
JS 연산자 우선순위
JS 문
JS 타입화된 배열

윈도우

Window 객체
윈도우 콘솔
윈도우 历史
윈도우 위치
윈도우 네비게이터
윈도우 스크린

HTML DOM

HTML 문서
HTML 요소
HTML 속성
HTML 이벤트
HTML 이벤트 객체
HTML 컬렉션
HTML NodeList
HTML DOMTokenList
HTML 스타일

웹 API

API Canvas
API 콘솔
API Fetch
API 전체화면
API 지리정보
API 历史
API MediaQueryList
API 저장소
API 검증
웹 API

HTML 객체

<a>
<abbr>
<address>
<area>
<article>
<aside>
<audio>
<b>
<base>
<bdo>
<blockquote>
<body>
<br>
<button>
<canvas>
<caption>
<cite>
<code>
<col>
<colgroup>
<datalist>
<dd>
<del>
<details>
<dfn>
<dialog>
<div>
<dl>
<dt>
<em>
<embed>
<fieldset>
<figcaption>
<figure>
<footer>
<form>
<head>
<header>
<h1> - <h6>
<hr>
<html>
<i>
</a></li> <li><a href="/ko/jsref/dom_obj_image.html" title="HTML DOM Image 객체"><iframe></a></li> <li><a href="/ko/jsref/dom_obj_ins.html" title="HTML DOM Ins 객체"><img></a></li> <li><a href="/ko/jsref/dom_obj_button.html" title="HTML DOM Input 버튼 객체"><ins></a></li> <li><a href="/ko/jsref/dom_obj_checkbox.html" title="HTML DOM Input 체크박스 객체"><input> 버튼</a></li> <li><a href="/ko/jsref/dom_obj_color.html" title="HTML DOM Input 색상 객체"><input> 체크박스</a></li> <li><a href="/ko/jsref/dom_obj_date.html" title="HTML DOM Input 날짜 객체"><input> 색상</a></li> <li><a href="/ko/jsref/dom_obj_datetime.html" title="HTML DOM Input datetime 객체"><input> 날짜</a></li> <li><a href="/ko/jsref/dom_obj_datetime-local.html" title="HTML DOM Input datetime-local 객체"><input> 날짜와 시간</a></li> <li><a href="/ko/jsref/dom_obj_email.html" title="HTML DOM Input 이메일 객체"><input> 이메일</a></li> <li><a href="/ko/jsref/dom_obj_fileupload.html" title="HTML DOM Input 파일업로드 객체"><input> 파일</a></li> <li><a href="/ko/jsref/dom_obj_hidden.html" title="HTML DOM Input 숨겨진 객체"><input> 숨김</a></li> <li><a href="/ko/jsref/dom_obj_input_image.html" title="HTML DOM Input 이미지 객체"><input> 이미지</a></li> <li><a href="/ko/jsref/dom_obj_month.html" title="HTML DOM Input 월 객체"><input> 월</a></li> <li><a href="/ko/jsref/dom_obj_number.html" title="HTML DOM Input 숫자 객체"><input> 숫자</a></li> <li><a href="/ko/jsref/dom_obj_password.html" title="HTML DOM Input 비밀번호 객체"><input> 비밀번호</a></li> <li><a href="/ko/jsref/dom_obj_radio.html" title="HTML DOM Input 라디오 객체"><input> 라디오</a></li> <li><a href="/ko/jsref/dom_obj_range.html" title="HTML DOM Input 범위 객체"><input> 범위</a></li> <li><a href="/ko/jsref/dom_obj_reset.html" title="HTML DOM Input 리셋 객체"><input> 재설정</a></li> <li><a href="/ko/jsref/dom_obj_search.html" title="HTML DOM Input 검색 객체"><input> 검색</a></li> <li><a href="/ko/jsref/dom_obj_submit.html" title="HTML DOM Input 제출 객체"><input> 제출</a></li> <li><a href="/ko/jsref/dom_obj_text.html" title="HTML DOM Input 텍스트 객체"><input> 텍스트</a></li> <li><a href="/ko/jsref/dom_obj_input_time.html" title="HTML DOM Input 시간 객체"><input> 시간</a></li> <li><a href="/ko/jsref/dom_obj_url.html" title="HTML DOM Input URL 객체"><input> URL</a></li> <li><a href="/ko/jsref/dom_obj_week.html" title="HTML DOM Input 주 객체"><input> 주</a></li> <li><a href="/ko/jsref/dom_obj_kbd.html" title="HTML DOM Kbd 객체"><kbd></a></li> <li><a href="/ko/jsref/dom_obj_label.html" title="HTML DOM Label 객체"><label></a></li> <li><a href="/ko/jsref/dom_obj_legend.html" title="HTML DOM Legend 객체"><legend></a></li> <li><a href="/ko/jsref/dom_obj_li.html" title="HTML DOM Li 객체"><li></a></li> <li><a href="/ko/jsref/dom_obj_link.html" title="HTML DOM Link 객체"><link></a></li> <li><a href="/ko/jsref/dom_obj_map.html" title="HTML DOM Map 객체"><map></a></li> <li><a href="/ko/jsref/dom_obj_mark.html" title="HTML DOM Mark 객체"><mark></a></li> <li><a href="/ko/jsref/dom_obj_menu.html" title="HTML DOM Menu 객체"><menu></a></li> <li><a href="/ko/jsref/dom_obj_menuitem.html" title="HTML DOM MenuItem 객체"><menuitem></a></li> <li><a href="/ko/jsref/dom_obj_meta.html" title="HTML DOM Meta 객체"><meta></a></li> <li><a href="/ko/jsref/dom_obj_meter.html" title="HTML DOM Meter 객체"><meter></a></li> <li><a href="/ko/jsref/dom_obj_nav.html" title="HTML DOM Nav 객체"><nav></a></li> <li><a href="/ko/jsref/dom_obj_object.html" title="HTML DOM Object 객체"><object></a></li> <li><a href="/ko/jsref/dom_obj_ol.html" title="HTML DOM Ol 객체"><ol></a></li> <li><a href="/ko/jsref/dom_obj_optgroup.html" title="HTML DOM OptionGroup 객체"><optgroup></a></li> <li><a href="/ko/jsref/dom_obj_option.html" title="HTML DOM Option 객체"><option></a></li> <li><a href="/ko/jsref/dom_obj_output.html" title="HTML DOM Output 객체"><output></a></li> <li><a href="/ko/jsref/dom_obj_paragraph.html" title="HTML DOM Paragraph 객체"><p></a></li> <li><a href="/ko/jsref/dom_obj_param.html" title="HTML DOM Parameter 객체"><param></a></li> <li><a href="/ko/jsref/dom_obj_pre.html" title="HTML DOM Pre 객체"><pre></a></li> <li><a href="/ko/jsref/dom_obj_progress.html" title="HTML DOM Progress 객체"><progress></a></li> <li><a href="/ko/jsref/dom_obj_quote.html" title="HTML DOM Quote 객체"><q></a></li> <li><a href="/ko/jsref/dom_obj_s.html" title="HTML DOM S 대상"><s></a></li> <li><a href="/ko/jsref/dom_obj_samp.html" title="HTML DOM Samp 대상"><samp></a></li> <li><a href="/ko/jsref/dom_obj_script.html" title="HTML DOM Script 대상"><script></a></li> <li><a href="/ko/jsref/dom_obj_section.html" title="HTML DOM Section 대상"><section></a></li> <li><a href="/ko/jsref/dom_obj_select.html" title="HTML DOM Select 대상"><select></a></li> <li><a href="/ko/jsref/dom_obj_small.html" title="HTML DOM Small 대상"><small></a></li> <li><a href="/ko/jsref/dom_obj_source.html" title="HTML DOM Source 대상"><source></a></li> <li><a href="/ko/jsref/dom_obj_span.html" title="HTML DOM Span 대상"><span></a></li> <li><a href="/ko/jsref/dom_obj_strong.html" title="HTML DOM Strong 대상"><strong></a></li> <li><a href="/ko/jsref/dom_obj_sub.html" title="HTML DOM Subscript 대상"><sub></a></li> <li><a href="/ko/jsref/dom_obj_summary.html" title="HTML DOM Summary 대상"><summary></a></li> <li><a href="/ko/jsref/dom_obj_sup.html" title="HTML DOM Superscript 대상"><sup></a></li> <li><a href="/ko/jsref/dom_obj_table.html" title="HTML DOM Table 대상"><table></a></li> <li><a href="/ko/jsref/dom_obj_tbody.html" title="HTML DOM TBody 대상"><tbody></a></li> <li><a href="/ko/jsref/dom_obj_tabledata.html" title="HTML DOM TableData 대상"><td></a></li> <li><a href="/ko/jsref/dom_obj_tfoot.html" title="HTML DOM TFoot 대상"><tfoot></a></li> <li><a href="/ko/jsref/dom_obj_tablehead.html" title="HTML DOM TableHeader 대상"><th></a></li> <li><a href="/ko/jsref/dom_obj_thead.html" title="HTML DOM THead 대상"><thead></a></li> <li><a href="/ko/jsref/dom_obj_tablerow.html" title="HTML DOM TableRow 대상"><tr></a></li> <li><a href="/ko/jsref/dom_obj_textarea.html" title="HTML DOM Textarea 대상"><textarea></a></li> <li><a href="/ko/jsref/dom_obj_time.html" title="HTML DOM Time 대상"><time></a></li> <li><a href="/ko/jsref/dom_obj_title.html" title="HTML DOM Title 대상"><title></a></li> <li><a href="/ko/jsref/dom_obj_track.html" title="HTML DOM Track 대상"><track></a></li> <li><a href="/ko/jsref/dom_obj_u.html" title="HTML DOM Underline 대상"><u></a></li> <li><a href="/ko/jsref/dom_obj_ul.html" title="HTML DOM Ul 대상"><ul></a></li> <li><a href="/ko/jsref/dom_obj_var.html" title="HTML DOM Variable 대상"><var></a></li> <li><a href="/ko/jsref/dom_obj_video.html" title="HTML DOM Video 대상"><video></a></li> </ul> <h2>기타 참조 매뉴얼</h2> <ul> <li><a href="/ko/jsref/obj_cssstyledeclaration.html" title="CSSStyleDeclaration 대상">CSSStyleDeclaration</a></li> <li><a href="/ko/jsref/jsref_type_conversion.html" title="JavaScript 타입 변환">JS 타입 변환</a></li> </ul> </div> <div><h3><center> 선택 과목 </center><h3> <h2>과목 추천:</h2> <ul> <li><a href="/ko/howto/index.html" title="CodeW3C.com 보물함">CodeW3C.com 보물함</a></li> </ul> </div> </div> <div id="maincontent"> <div class="idea"> <a href="/"><button>English</button></a> <a href="/zh/"><button>中文</button></a> <a href="/oldzh/"><button>繁體中文</button></a> <a href="/ru/"><button>Русский</button></a> <a href="/fr/"><button>Français</button></a> <a href="/de/"><button>Deutsch</button></a> <a href="/es/"><button>Español</button></a> <a href="/pt/"><button>Português</button></a> <a href="/ja/"><button>日本語</button></a> <a href="/ko/"><button>한국어</button></a> <a href="/it/"><button>Italiano</button></a> <a href="/ar/"><button>عربي</button></a> <a href="/hi/"><button>हिंदी</button></a> <a href="/bn/"><button>বাংলা</button></a> <a href="/ms/"><button>Bahasa Malaysia</button></a> <a href="/my/"><button>မြန်မာ</button></a> <a href="/vi/"><button>Tiếng Việt</button></a> <a href="/th/"><button>ภาษาไทย</button></a> <a href="/lo/"><button>ລາວ</button></a> <a href="/id/"><button>Bahasa Indonesia</button></a> <a href="/ur/"><button>اردو</button></a> <a href="/ha/"><button>Hausa</button></a> <a href="/pl/"><button>Język polski</button></a> <a href="/pa/"><button>ਪੰਜਾਬੀ</button></a> <a href="/sv/"><button>Svenska</button></a> <a href="/da/"><button>Dansk</button></a> <a href="/nl/"><button>Nederlands</button></a> <a href="/tr/"><button>Türkçe</button></a> <a href="/fi/"><button>suom.</button></a> <a href="/el/"><button>Ελληνικά</button></a> <a href="/fa/"><button>فارسی</button></a> <a href="/sw/"><button>Kiswahili</button></a> <a href="/te/"><button>తెలుగు</button></a> <a href="/tl/"><button>wikang Galu</button></a> </div> <h1>HTML DOMTokenList remove() 메서드</h1> <div class="prenextnav-ref"> <ul> <li> 이전 페이지 <a href="/ko/jsref/prop_domtokenlist_length.html" title="HTML DOMTokenList length 속성">length</a></li> <li> 다음 페이지 <a href="/ko/jsref/met_domtokenlist_replace.html" title="HTML DOMTokenList replace() 메서드">replace()</a></li> <li> 上一层으로 돌아가기 <a href="/ko/jsref/dom_obj_html_domtokenlist.html" title="HTML DOMTokenList">HTML DOMTokenList</a></li> </ul> </div> <div> <h2>정의와 사용법</h2> <p>remove() 메서드는 DOMTokenList에서 하나(또는 여러 개)의 토큰을 제거합니다.</p> </div> <div> <h2>인스턴스</h2> <h3>예제 1</h3> <p>"myStyle" 클래스를 요소에서 제거:</p> <pre class="language-js"> const list = element.classList; list.remove("myStyle"); </pre> <p class="tiy"><a target="_blank" href="/ko/tiy/t.html?f=jsck_element_classlist_remove_1">직접 시도해 보세요</a></p> <h3>예제 2</h3> <p>요소에 "myStyle" 클래스 추가:</p> <pre class="language-js"> const list = element.classList; list.add("myStyle"); </pre> <p class="tiy"><a target="_blank" href="/ko/tiy/t.html?f=jsck_element_classlist_add_1">직접 시도해 보세요</a></p> <h3>예제 3</h3> <p>"myStyle"의 열림/닫힘을 전환합니다：</p> <pre class="language-js"> const list = element.classList; list.toggle("myStyle"); </pre> <p class="tiy"><a target="_blank" href="/ko/tiy/t.html?f=jsck_element_classlist_toggle">직접 시도해 보세요</a></p> <h3>예제 4</h3> <p>요소에서 여러 개의 클래스를 제거합니다：</p> <pre class="language-js"> element.classList.remove("myStyle", "anotherClass", "thirdClass"); </pre> <p class="tiy"><a target="_blank" href="/ko/tiy/t.html?f=jsck_element_classlist_remove_2">직접 시도해 보세요</a></p> <h3>예제 5</h3> <p>요소의 클래스 이름 수를 얻으세요：</p> <pre class="language-js"> let numb = element.classList.length; </pre> <p class="tiy"><a target="_blank" href="/ko/tiy/t.html?f=jsck_element_classlist_length">직접 시도해 보세요</a></p> <h3>예제 6</h3> <p>요소가 "myStyle" 클래스를 가지고 있습니까?</p> <pre class="language-js"> let x = element.classList.contains("myStyle"); </pre> <p class="tiy"><a target="_blank" href="/ko/tiy/t.html?f=jsck_element_classlist_contains_1">직접 시도해 보세요</a></p> <h3>예제 7</h3> <p>요소가 "myStyle" 클래스를 가지고 있다면, "anotherClass"를 제거합니다。</p> <pre class="language-js"> if (element.classList.contains("mystyle")) { element.classList.remove("anotherClass"); } </pre> <p class="tiy"><a target="_blank" href="/ko/tiy/t.html?f=jsck_element_classlist_contains_2">직접 시도해 보세요</a></p> </div> <div> <h2>문법</h2> <pre><i>domtokenlist</i>.remove(<i>token</i>, ...)</pre> <h3>파라미터</h3> <table class="dataintable"> <tr> <th style="width: 25%;">파라미터</th> <th>설명</th> </tr> <tr> <td><i>token</i></td> <td>필수입니다. 목록에서 제거할 토큰(token)이 필요합니다.</td> </tr> </table> <h3>반환 값</h3> <p>없음。</p> </div> <div> <h2>브라우저 지원</h2> <p>domtokenlist.remove()는 DOM Level 4 (2015) 기능입니다.</p> <p>모든 브라우저가 지원합니다：</p> <table class="browser-support"> <tr> <th class="bsChrome">Chrome</th> <th class="bsEdge">Edge</th> <th class="bsFirefox">Firefox</th> <th class="bsSafari">Safari</th> <th class="bsOpera">Opera</th> </tr> <tr> <td>Chrome</td> <td>Edge</td> <td>Firefox</td> <td>Safari</td> <td>Opera</td> </tr> <tr> <td>지원</td> <td>지원</td> <td>지원</td> <td>지원</td> <td>지원</td> </tr> </table> <p>Internet Explorer 11( 및 이전 버전)는 domtokenlist.remove()를 지원하지 않습니다.</p> </div> <div> <h2>관련 페이지</h2> <p><a href="/ko/jsref/prop_domtokenlist_length.html" title="HTML DOMTokenList length 속성">length 속성</a></p> <p><a href="/ko/jsref/met_domtokenlist_item.html" title="HTML DOMTokenList item() 메서드">item() 메서드</a></p> <p><a href="/ko/jsref/met_domtokenlist_add.html" title="HTML DOMTokenList add() 메서드">add() 메서드</a></p> <p><a href="/ko/jsref/met_domtokenlist_toggle.html" title="HTML DOMTokenList toggle() 메서드">toggle() 메서드</a></p> <p><a href="/ko/jsref/met_domtokenlist_foreach.html" title="HTML DOMTokenList forEach() 메서드">forEach() 메서드</a></p> <p><a href="/ko/jsref/met_domtokenlist_entries.html" title="HTML DOMTokenList entries() 메서드">entries() 메서드</a></p> <p><a href="/ko/jsref/met_domtokenlist_keys.html" title="HTML DOMTokenList keys() 메서드">keys() 메서드</a></p> <p><a href="/ko/jsref/met_domtokenlist_values.html" title="HTML DOMTokenList values() 메서드">values() 메서드</a></p> <p><a href="/ko/jsref/dom_obj_html_domtokenlist.html" title="HTML DOMTokenList 참조 설명서">DOMTokenList 객체</a></p> </div> <div class="prenextnav-ref"> <ul> <li> 이전 페이지 <a href="/ko/jsref/prop_domtokenlist_length.html" title="HTML DOMTokenList length 속성">length</a></li> <li> 다음 페이지 <a href="/ko/jsref/met_domtokenlist_replace.html" title="HTML DOMTokenList replace() 메서드">replace()</a></li> <li> 上一层으로 돌아가기 <a href="/ko/jsref/dom_obj_html_domtokenlist.html" title="HTML DOMTokenList">HTML DOMTokenList</a></li> </ul> </div><div style="background-color:#fcfdf8; padding:0;"> </div> </div>  <div id="sidebar"> <div><h3><center> 도구함 </center><h3> <h5 id="tools_reference"><a href="/ko/jsref/index.html">JavaScript 및 HTML DOM 참조 매뉴얼</a></h5> <h5 id="tools_example"><a href="/ko/js/js_examples.html">JavaScript 예제</a></h5> <h5 id="tools_quiz"><a href="/ko/js/js_quiz.html">JavaScript 테스트</a></h5> <h5 id="tools_tutorial"><a href="/ko/js/index.html">JavaScript 교본</a></h5> </div> <div><h3><center> 스폰서 링크 </center><h3> <div id="sbtg"> <script src="/myjs/zzsr.js"></script> </div> </div> </div> <div id="footer"> <p id="p1"> CodeW3C.com 제공하는 내용은 훈련 및 테스트 용으로만 사용되며 내용의 정확성을 보장하지 않습니다. 이 사이트의 내용을 사용함으로써 발생하는 모든 위험은 이 사이트와 무관합니다. 저작권 소유, 모든 권리를 보존합니다. </p> <p id="p2"> <a href="/ko/about/index.html" title="CodeW3C.com에 관해">CodeW3C.com에 관해</a> <a href="/ko/about/about_helping.html" title="CodeW3C.com 도움말">CodeW3C.com 도움말</a> <a href="/ko/about/about_use.html" title="사용 방법에 관해">이용 조건</a> <a href="/ko/about/about_privacy.html" title="개인 정보에 관해">개인 정보 보호 조항</a> <a href="http://www.comfortsoftwaregroup.com/" target="_blank"><img src="/comfortsoftwaregroup.png"></a> <a href="http://www.ce4e.com/" target="_blank"><img src="/poweredby.png" alt="Ce4e.com으로 구동됨"></a> </p> </div> </div>  <script src="/myjs/tongji.js"></script> </body> </html>