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

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

// 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());

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

한 줄

document.querySelectorAll(".remove").forEach(el => el.remove());

예를 들어이 페이지에서 사용자 정보를 제거 할 수 있습니다.

document.querySelectorAll(".user-info").forEach(el => el.remove());

예, 부모에서 제거해야합니다.

cur_columns[i].parentNode.removeChild(cur_columns[i]);

다음 구문을 사용할 수 있습니다. node.parentNode

예를 들면 :

someNode = document.getElementById("someId");
someNode.parentNode.removeChild(someNode);

재귀 함수는 다음과 같이 문제를 해결할 수 있습니다.

removeAllByClassName = function (className) {
    function findToRemove() {
        var sets = document.getElementsByClassName(className);
        if (sets.length > 0) {
            sets[0].remove();
            findToRemove();
        }
    }
    findToRemove();
};
//
removeAllByClassName();

동적으로 추가 된 요소를 제거하려면 다음을 시도하십시오.

document.body.addEventListener('DOMSubtreeModified', function(event) {
    const elements = document.getElementsByClassName('your-class-name');
    while (elements.length > 0) elements[0].remove();
});

const elem= document.getElementsByClassName('column')

for (let i = elem.length; 0 < i ; )
    elem[--i].remove();

또는

const elem= document.getElementsByClassName('column')

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

매우 간단하고 한 줄짜리 ES6 스프레드 연산자를 사용하므로 document.getElementByClassName은 HTML 컬렉션을 반환합니다.

[...document.getElementsByClassName('dz-preview')].map(thumb => thumb.remove());

이것의 건너 뛰는 요소 버그 (위의 코드)

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

다음과 같이 루프를 뒤로 실행하여 수정할 수 있습니다 (임시 배열이 필요하지 않음).

var len = cells.length;
for(var i = len-1; i >-1; i--) {
    if(cells[i].className.toLowerCase() == "column") {
        cells[i].parentNode.removeChild(cells[i]);
   }
}

간단한 솔루션을 사용하고 클래스를 변경하면 HTML 컬렉션 필터가 업데이트됩니다.

var cur_columns = document.getElementsByClassName('column');

for (i in cur_columns) {
   cur_columns[i].className = '';
}

참고 : http://www.w3.org/TR/2011/WD-html5-author-20110705/common-dom-interfaces.html