클래스 이름별로 요소 제거

클래스 이름별로 요소 제거

클래스 이름을 가진 요소를 찾기 위한 코드는 아래와 같습니다.

// 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++) {
      
}

제가 부모님을 언급해야 하나요?이 일을 처리하는 가장 좋은 방법은 무엇입니까?

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를 사용하지 않으려는 경우:

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

jQuery(이 경우에는 실제로 사용할 수 있을 것으로 생각됨)를 사용하면 다음과 같은 작업을 수행할 수 있습니다.

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

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

element.parentNode.removeChild(element);

Element.remove() 사용

단일 요소 제거

document.querySelector("#remove").remove();

여러 요소 제거

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

편리한 재사용 가능한 기능을 원하는 경우:

const remove = (sel) => document.querySelectorAll(sel).forEach(el => el.remove());

// Use like:
remove(".remove");
remove("#remove-me");

<p class="remove">REMOVE ME</p>
<p>KEEP ME</p>
<p class="remove">REMOVE ME</p>
<p id="remove-me">REMOVE ME</p>

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

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

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

한 줄

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

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

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

이것은 나에게 효과가 있습니다.

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

브렛 - 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());

가장 효율적인 방법은 아닙니다.저한테는 훨씬 더 우아합니다.

ES6 스프레드 연산자 due document.getElementByClassName을 사용하여 HTML 컬렉션을 반환하는 매우 단순한 단일 라이너입니다.

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

예, 상위 항목에서 제거해야 합니다.

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

동적으로 추가된 요소를 제거하려면 다음을 수행합니다.

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

다음 구문을 사용할 수 있습니다.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();

이것이 제가 퓨어 자바스크립트에서 비슷한 작업을 완료한 방법입니다.

function setup(item){
   document.querySelectorAll(".column") /* find all classes named column */
  .forEach((item) => { item /* loop  through each item */
      .addEventListener("click", (event) => { item
        /* add event listener for each item found */
          .remove(); /* remove self - changed node as needed */
      });
  });
  }

  setup();

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

const elem= document.getElementsByClassName('column')

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

OR

const elem= document.getElementsByClassName('column')

while (elem.length > 0 )
    elem[0].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 Collection 필터가 업데이트됩니다.

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

언급URL : https://stackoverflow.com/questions/4777077/removing-elements-by-class-name