वर्ग नाम से तत्वों को निकालना?

Question

मेरे पास उनके वर्ग नाम के साथ तत्वों को खोजने के लिए नीचे दिया गया कोड है:

// 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:

यहाँ जेएस है:

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 विकल्प का उपयोग करके समाप्त हो गया।

Comments

ईमानदारी से, सबसे अच्छा तरीका सिर्फ jQuery का उपयोग करना है। वास्तव में समझ में नहीं आता कि क्यों कोई भी हाथ से डोम हेरफेर करना चाहेगा।

— टायलर ईव्स

मुझे पता नहीं है .... मुझे लगता है कि मैं फ्रेमवर्क को जानकर गंदा महसूस करूंगा और वास्तव में वेनिला जेएस का उपयोग करने में सक्षम होने का कोई ज्ञान नहीं है। जब से मैं एक विशाल JS व्यक्ति नहीं हूँ, मैं कोशिश करता हूँ और वेनिला JS के साथ सिर्फ कोड करता हूँ जब मैं इसका उपयोग करता हूँ तो मैं चीजों को नहीं भूलता

— Brett

सही। कौन पृथ्वी पर एक जानकार और अच्छी तरह से विकसित डेवलपर बनना चाहेगा। बेतुका!

— user113716

एक अच्छा दृष्टिकोण, ज़ाहिर है, लेकिन सिर्फ इसलिए कि आप jQuery का उपयोग कर रहे हैं, इसका मतलब यह नहीं है कि आपको यह समझने में कसर छोड़नी होगी कि यह कैसे काम करता है या अंतर्निहित DOM ऑफ़र क्या है। आप अपनी कार को ठीक कर सकते हैं यदि आप चाहते थे (डोम), लेकिन आपका मैकेनिक शायद इस पर अधिक अनुभवी है (jQuery टीम)।

— जूनियर कोहेन

@ जूनियर: हाँ, अच्छी तरह से मेरे मैकेनिक को चाबी को चालू करने या मेरी खिड़की को रोल करने में मेरी मदद करने की आवश्यकता नहीं है। ; ओ)

— उपयोगकर्ता 113716

Answer 1

JQuery का उपयोग करना (जो आप वास्तव में इस मामले में उपयोग कर सकते हैं, मुझे लगता है), आप ऐसा कर सकते हैं:

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

अन्यथा, आपको इसे हटाने के लिए प्रत्येक तत्व के माता-पिता का उपयोग करने की आवश्यकता होगी:

element.parentNode.removeChild(element);

Comments

+0.75 jQuery का उपयोग करने के लिए, +0.25 गैर-jQuery समाधान देने के लिए भी: p

— ThiefMaster

JQuery का उपयोग करने के लिए +0.01, गैर-jQuery समाधान देने के लिए +0.99 भी: p

— एलेक्स Pyzhianov

Answer 2

यदि आप JQuery का उपयोग नहीं करना पसंद करते हैं:

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

Comments

गैर-काम कर रहे समाधानों की एक आश्चर्यजनक मात्रा है। यह सही है। धन्यवाद!

— पेंगुइन

अगर कोई सोच रहा है कि वह पहला तत्व (इंडेक्स 0) हमेशा क्यों निकाल रहा है, तो ऐसा इसलिए है क्योंकि जब आप किसी तत्व को हटाते हैं, तो यह elementsऐरे को भी सिकोड़ता है ।

— जेफरसन लीमा

दूसरों के सूचकांक के बारे में क्या है (0 सूचकांक को स्वीकार करें)?

— ofir_aghai

@ofir_aghai @JeffersonLima अंक getElementsByClassNameएक जीवंत संग्रह है। developer.mozilla.org/en-US/docs/Web/API/NodeList

— Veikko Karsikko

इस तथ्य के बारे में अच्छा अवलोकन कि तत्व सरणी सिकुड़ती है

— फेरालुचो

Answer 3

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>

Comments

ES6 का आगे लाभ उठाने के लिए, कैसे के बारे में: var removeElements = (elms) => [... elms] .forEach (el => el.remove ());

— कैल्क्युसविज़

सर्वश्रेष्ठ उत्तर धन्यवाद!

— फ्रांसेस्को

Answer 4

शुद्ध जावास्क्रिप्ट में, बिना jQuery या ES6 के, आप कर सकते हैं:

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

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

Comments

JQuery और ES6 के बिना स्पष्ट उत्तर

— एरिक

हो सकता है कि आपका जवाब बाद में आया हो - स्वीकार किया जाना चाहिए क्योंकि यह jQuery के भरोसेमंद है। सामान्य तौर पर वेनिला-जेएस का उपयोग करना बेहतर होता है, है न?

— लकीफेला

अनावश्यक और बोझिल jQuery के बिना सबसे अच्छा जवाब। JQuery के लिए NO कहो। वनीला बर्फ के लिए हाँ!

— थानसी

Answer 5

यह मेरे लिए काम करता है

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

Answer 6

ब्रेट - क्या आप जानते हैं कि getElementyByClassNameIE 5.5 से 8 तक समर्थन quirksmode के अनुसार नहीं है ? यदि आप क्रॉस-ब्राउज़र संगतता की परवाह करते हैं, तो आप इस पैटर्न का पालन करना बेहतर होगा:

• आईडी द्वारा कंटेनर तत्व प्राप्त करें।
• टैग नाम से आवश्यक बाल तत्व प्राप्त करें।
• बच्चों से अधिक, क्लासनाम की संपत्ति के मिलान के लिए परीक्षण करें।
• 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]);
}

समस्या मेरी गलती थी; जब आप तत्वों के परिणामस्वरूप सरणी से एक तत्व निकालते हैं, तो लंबाई बदल जाती है, इसलिए प्रत्येक पुनरावृत्ति पर एक तत्व छोड़ दिया जाता है। समाधान अस्थायी तत्व में प्रत्येक तत्व के संदर्भ को संग्रहीत करना है, फिर बाद में उन पर लूप करें, जो डोम से प्रत्येक को हटाते हैं।

इसे यहाँ आज़माएँ।

Comments

इसके लिए धन्यवाद - हालांकि यह एक बहुत बड़ा मुद्दा नहीं है क्योंकि यह एक व्यवस्थापक अनुभाग के लिए है, इसलिए वास्तव में एक व्यक्ति इसका उपयोग कर रहा होगा .... लेकिन फिर भी आपकी टिप्पणियों को ध्यान में रखेगा।

— ब्रेट

@ ब्रेट - वैसे भी करो! यह आपके समय के कुछ मिनट लगेगा और आपको कार्यालय में अतिरिक्त उच्च-फाइव मिलेंगे :)

— karim79

ठीक है मैंने यह कोशिश की ... जब मैंने अलर्ट किया तो तत्वों की सही मात्रा की सूचना दी, लेकिन इसने उस वर्ग के नाम के साथ चार में से केवल दो को हटा दिया और मुझे यह त्रुटि मिली: col_wrapper [i] अपरिभाषित है। मैं अपनी पोस्ट को मेरे द्वारा उपयोग किए गए कोड के साथ अपडेट करूंगा।

— ब्रेट

@ ब्रेट - यदि आप रुचि रखते हैं, तो मैंने आपका अपडेटेड कोड ठीक कर दिया, और समस्या पर टिप्पणी की।

— करीम k

यार, इससे मुझे और मदद मिली, जितना कि आप पिछले दो घंटों में एक मुद्दे पर कल्पना कर सकते हैं। धन्यवाद!

— जूलैंडर २०'१२

Answer 7

मैं forEachओवर for/ whileलूपिंग का उपयोग करना पसंद करता हूं । का उपयोग करने के लिए यह कन्वर्ट करने के लिए आवश्यक है HTMLCollectionकरने के लिए Arrayपहले:

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

ध्यान दें, यह सबसे कुशल तरीका नहीं है। बस मेरे लिए और अधिक सुरुचिपूर्ण।

Answer 8

एक पंक्ति

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

उदाहरण के लिए आप इस पेज में userinfo को हटा सकते हैं

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

Answer 9

हां, आपको माता-पिता से निकालना होगा:

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

Answer 10

आप इस सिंटैक्स का उपयोग कर सकते हैं: node.parentNode

उदाहरण के लिए:

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

Comments

यह सवाल क्लासनेम से हटाने के लिए कहा गया है

— जोएटाइड

Answer 11

पुनरावर्ती फ़ंक्शन आपकी समस्या को नीचे की तरह हल कर सकता है

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

Comments

हाहा ने एक लूप टाल दिया। <3

— इवान इवकोविले

Answer 12

यदि आप ऐसे तत्वों को हटाना चाहते हैं, जिन्हें गतिशील रूप से जोड़ा जाता है, तो यह प्रयास करें:

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

Answer 13

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

Answer 14

यह बहुत ही सरल, वन-लाइनर है, जो ES6 स्प्रेड ऑपरेटर के कारण डॉक्यूमेंट का उपयोग करता है ।getElementByClassName एक HTML संग्रह लौटाता है।

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

Answer 15

इसमें लंघन तत्व बग (ऊपर से कोड)

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]);
   }
}

Comments

यह थोड़ा जटिल है। इसके बजाय थोड़ी देर चक्र का उपयोग क्यों नहीं करते? (मेरा उत्तर देखें)

— tocqueville

@tocqueville पोस्ट किए गए प्रश्न में लूप के लिए उपयोग किया गया था। मैं केवल इशारा कर रहा था कि बग को उसके कोड में न्यूनतम परिवर्तन के साथ कैसे ठीक किया जाए।

— shao.lo

Answer 16

आप एक सरल समाधान का उपयोग कर सकते हैं, बस कक्षा बदल सकते हैं, HTML संग्रह फ़िल्टर अपडेट किया गया है:

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

Comments

यह काम नहीं करेगा क्योंकि लूप की सरणी लूप के अंदर ही संशोधित है। नतीजा यह है कि अंतिम तत्व को छोड़ दिया जाएगा।

— टोक़विल्ले