[javascript] 클래스 이름으로 요소를 제거 하시겠습니까?

클래스 이름을 가진 요소를 찾기 위해 아래 코드가 있습니다.

// Get the element by their class name
var cur_columns = document.getElementsByClassName('column');

// Now remove them

for (var i = 0; i < cur_columns.length; i++) {

}

제거하는 방법을 모르겠어요 ….. 부모를 참조해야하나요? 이를 처리하는 가장 좋은 방법은 무엇입니까?

@ Karim79 :

다음은 JS입니다.

var col_wrapper = document.getElementById("columns").getElementsByTagName("div");
var len = col_wrapper.length;

alert(len);

for (var i = 0; i < len; i++) {
    if (col_wrapper[i].className.toLowerCase() == "column") {
        col_wrapper[i].parentNode.removeChild(col_wrapper[i]);
    }
}

다음은 HTML입니다.

<div class="columns" id="columns">
    <div class="column"><input type="checkbox" name="col_list[]" value="cows">cows</div>
    <div class="column"><input type="checkbox" name="col_list[]" value="cows">cows</div>
    <div class="column"><input type="checkbox" name="col_list[]" value="cows">cows</div>
    <div class="column"><input type="checkbox" name="col_list[]" value="cows">cows</div>
    <div name="columnClear" class="contentClear" id="columnClear"></div>
</div>

편집 : jQuery 옵션을 사용하여 끝났습니다.

답변

jQuery를 사용하면 (이 경우 실제로 사용할 수 있다고 생각합니다) 다음과 같이 할 수 있습니다.

$('.column').remove();

그렇지 않으면 각 요소의 부모를 사용하여 제거해야합니다.

element.parentNode.removeChild(element);

답변

JQuery를 사용하지 않으려는 경우 :

function removeElementsByClass(className){
    var elements = document.getElementsByClassName(className);
    while(elements.length > 0){
        elements[0].parentNode.removeChild(elements[0]);
    }
}

답변

ES6 를 사용 하면 다음과 같이 할 수 있습니다.

const removeElements = (elms) => elms.forEach(el => el.remove());

// Use like:
removeElements( document.querySelectorAll(".remove") );

<p class="remove">REMOVE ME</p>
<p>KEEP ME</p>
<p class="remove">REMOVE ME</p>

스 니펫 확장

답변

jQuery 또는 ES6없이 순수 자바 스크립트에서는 다음을 수행 할 수 있습니다.

const elements = document.getElementsByClassName("my-class");

while (elements.length > 0) elements[0].remove();

답변

이것은 나를 위해 작동합니다

while (document.getElementsByClassName('my-class')[0]) {
        document.getElementsByClassName('my-class')[0].remove();
    }

답변

Brett- quirksmode에 따라 getElementyByClassName IE 5.5에서 8까지의 지원이 없다는 것을 알고 있습니까?. 브라우저 간 호환성에 관심이 있다면이 패턴을 따르는 것이 좋습니다.

ID로 컨테이너 요소를 가져옵니다.
태그 이름으로 필요한 자식 요소를 가져옵니다.
자식을 반복하고 className 속성과 일치하는지 테스트합니다.
elements[i].parentNode.removeChild(elements[i]) 다른 사람들이 말한 것처럼.

빠른 예 :

var cells = document.getElementById("myTable").getElementsByTagName("td");
var len = cells.length;
for(var i = 0; i < len; i++) {
    if(cells[i].className.toLowerCase() == "column") {
        cells[i].parentNode.removeChild(cells[i]);
    }
}

다음은 간단한 데모입니다.

편집 : 다음은 마크 업에 특정한 고정 버전입니다.

var col_wrapper = document.getElementById("columns").getElementsByTagName("div");

var elementsToRemove = [];
for (var i = 0; i < col_wrapper.length; i++) {
    if (col_wrapper[i].className.toLowerCase() == "column") {
        elementsToRemove.push(col_wrapper[i]);
    }
}
for(var i = 0; i < elementsToRemove.length; i++) {
    elementsToRemove[i].parentNode.removeChild(elementsToRemove[i]);
}

문제는 내 잘못이었습니다. 결과 요소 배열에서 요소를 제거하면 길이가 변경되므로 각 반복에서 하나의 요소를 건너 뜁니다. 해결책은 각 요소에 대한 참조를 임시 배열에 저장 한 다음 그에 대해 반복하여 DOM에서 각 요소를 제거하는 것입니다.

여기에서 시도하십시오.

답변

나는 forEach오버 for/ while루핑을 선호합니다 . 사용 HTMLCollection하려면 Array먼저 변환 해야합니다 .

Array.from(document.getElementsByClassName("post-text"))
    .forEach(element => element.remove());

주의하세요. 가장 효율적인 방법은 아닙니다. 나를 위해 훨씬 더 우아합니다.