클래스 이름으로 요소를 제거 하시겠습니까?
클래스 이름을 가진 요소를 찾기 위해 아래 코드가 있습니다.
// 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없이 다음을 수행 할 수 있습니다.
const elements = document.getElementsByClassName("my-class");
while (elements.length > 0) elements[0].remove();
Brett - are you aware that getElementyByClassName
support from IE 5.5 to 8 is not there according to quirksmode?. You would be better off following this pattern if you care about cross-browser compatibility:
- Get container element by ID.
- Get needed child elements by tag name.
- Iterate over children, test for matching className property.
elements[i].parentNode.removeChild(elements[i])
like the other guys said.
Quick example:
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]);
}
}
EDIT: Here is the fixed version, specific to your markup:
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]);
}
The problem was my fault; when you remove an element from the resulting array of elements, the length changes, so one element gets skipped at each iteration. The solution is to store a reference to each element in a temporary array, then subsequently loop over those, removing each one from the DOM.
This works for me
while (document.getElementsByClassName('my-class')[0]) {
document.getElementsByClassName('my-class')[0].remove();
}
I prefer using forEach
over for
/while
looping. In order to use it's necessary to convert HTMLCollection
to Array
first:
Array.from(document.getElementsByClassName("post-text"))
.forEach(element => element.remove());
Pay attention, it's not necessary the most efficient way. Just much more elegant for me.
Yes, you have to remove from the parent:
cur_columns[i].parentNode.removeChild(cur_columns[i]);
You can use this syntax: node.parentNode
For example:
someNode = document.getElementById("someId");
someNode.parentNode.removeChild(someNode);
Recursive function might solve your problem like below
removeAllByClassName = function (className) {
function findToRemove() {
var sets = document.getElementsByClassName(className);
if (sets.length > 0) {
sets[0].remove();
findToRemove();
}
}
findToRemove();
};
//
removeAllByClassName();
In case you want to remove elements which are added dynamically try this:
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();
OR
const elem= document.getElementsByClassName('column')
while (elem.length > 0 )
elem[0].remove();
The skipping elements bug in this (code from above)
var len = cells.length;
for(var i = 0; i < len; i++) {
if(cells[i].className.toLowerCase() == "column") {
cells[i].parentNode.removeChild(cells[i]);
}
}
can be fixed by just running the loop backwards as follows (so that the temporary array is not needed)
var len = cells.length;
for(var i = len-1; i >-1; i--) {
if(cells[i].className.toLowerCase() == "column") {
cells[i].parentNode.removeChild(cells[i]);
}
}
You can you use a simple solution, just change the class, the HTML Collection filter is updated:
var cur_columns = document.getElementsByClassName('column');
for (i in cur_columns) {
cur_columns[i].className = '';
}
Ref: 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
'developer tip' 카테고리의 다른 글
파이썬 첫 번째와 마지막 큰 따옴표를 어떻게 제거 할 수 있습니까? (0) | 2020.08.29 |
---|---|
Swift에서 메일 앱을 여는 방법 (0) | 2020.08.29 |
in_array 여러 값 (0) | 2020.08.29 |
Python의 버전 번호 비교 (0) | 2020.08.29 |
중복 항목을 삭제하는 방법은 무엇입니까? (0) | 2020.08.29 |