শ্রেণীর নাম অনুসারে উপাদানগুলি সরানো হচ্ছে?

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

এইচটিএমএল:

<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 ব্যবহার করা। কেউ কেন হাতের মুঠোয় ডিওএম ম্যানিপুলেশন করতে চায় তা সত্যই বুঝতে পারি না।

— টাইলার ইভা

আমি জানি না .... আমি কেবল ফ্রেমওয়ার্কগুলি জানার মতো নোংরা অনুভব করছি এবং ভ্যানিলা জেএস ব্যবহার করতে সক্ষম হওয়ার কোনও জ্ঞান নেই। যেহেতু আমি একটি বিশাল জেএস ব্যক্তি নই, আমি যখন ভ্যানিলা জেএস ব্যবহার করি তখন কেবল কোড চেষ্টা করি যাতে আমি লোলগুলি ভুলে যাব না

— ব্রেট

ঠিক। পৃথিবীতে কে একজন জ্ঞাতনীয় এবং সুদৃ .় বিকাশকারী হতে চাইবে। কিম্ভুতকিমাকার!

— ব্যবহারকারী 113716

অবশ্যই একটি ভাল পন্থা, তবে কেবল আপনি jQuery ব্যবহার করছেন এর অর্থ এই নয় যে এটি কীভাবে কাজ করে বা অন্তর্নিহিত ডোম কী প্রস্তাব দেয় তা বোঝার জন্য আপনাকে হাল ছেড়ে দিতে হবে না। আপনি যদি চান (ডিওএম) চান তবে আপনি সম্ভবত নিজের গাড়িটি ঠিক করতে পারতেন তবে আপনার যান্ত্রিক সম্ভবত এটির (jQuery দল) আরও অভিজ্ঞ।

— লাইওর কোহেন

@ লাইয়ার: হ্যাঁ, ভাল আমার মেকানিকের চাবিটি ঘোরানো বা আমার উইন্ডোটি নামাতে সাহায্য করার দরকার নেই। ; ও)

— ব্যবহারকারী 113716

Answer 1

JQuery ব্যবহার (যা আপনি সত্যিই এই ক্ষেত্রে ব্যবহার করতে পারেন, আমি মনে করি), আপনি এইভাবে এটি করতে পারেন:

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

অন্যথায়, এটিকে অপসারণ করতে আপনার প্রতিটি উপাদানটির পিতামাতাকে ব্যবহার করতে হবে:

element.parentNode.removeChild(element);

Comments

JQuery ব্যবহারের জন্য +0.75, অ-jQuery সমাধান দেওয়ার জন্য

— +0.25

JQuery ব্যবহারের জন্য +0.01, নন-জিক্যুরি সমাধান দেওয়ার জন্য +0.99: পি

— অ্যালেক্স পাইজিয়ানভ

Answer 2

আপনি যদি JQuery ব্যবহার না করা পছন্দ করেন:

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

Comments

অবাক করা পরিমাণের সমাধান সেখানে there এই ঠিক আছে। ধন্যবাদ!

— পেঙ্গুইনসোর্স

যদি কেউ ভাবছেন যে তিনি কেন সর্বদা প্রথম উপাদানটি (সূচক 0) মুছে ফেলছেন, কারণ কারণ আপনি যখন কোনও উপাদান সরিয়ে ফেলেন তখন এটি অ্যারেও সঙ্কুচিত করে elements।

— জেফারসন লিমা

অন্য সূচকগুলি সম্পর্কে কি (0 সূচকটি গ্রহণ করুন)?

— ofir_aghai

@ জফারসনলিমা নির্দেশিত হিসাবে @ ফির_ঘাই getElementsByClassNameএকটি লাইভ সংগ্রহ। বিকাশকারী.মোজিলা.আর.ইন-

— ইউএস / ডকস / ওয়েবে / এপিআই / নোডলিস্ট

উপাদানগুলি অ্যারে সঙ্কুচিত হয়ে

— পড়েছে

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 সরানো উপাদানগুলি = (এলমস) => [... এলমস] .এফ (এল => এল.রেমোভ ());

— ক্যালকুলাসহিজ

সেরা উত্তর ধন্যবাদ!

— ফ্রান্সেসকো

Answer 4

খাঁটি জাভাস্ক্রিপ্টে, jQuery বা ES6 ছাড়াই আপনি এটি করতে পারেন:

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

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

Comments

JQuery এবং ES6 ছাড়াই সবচেয়ে পরিষ্কার উত্তর

— এরিক

সম্ভবত আপনার উত্তর পরে এসেছিল - এটি গ্রহণযোগ্য হওয়া উচিত কারণ এটি jQuery এর উপর নির্ভরশীল নয়। সাধারণত ভ্যানিলা-জেএস ব্যবহার করা ভাল, তাই না?

— লাকিফেলা

অপ্রয়োজনীয় এবং বোঝা jQuery ছাড়াই সেরা উত্তর। JQuery না বলুন। হ্যাঁ ভ্যানিলা বরফ!

— থানাসিস

Answer 5

এটি আমার পক্ষে কাজ করে

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

Answer 6

ব্রেট - যে আপনি সচেতন getElementyByClassNameইন্টারনেট 5.5 থেকে 8 সমর্থন করা হয় না সেখানে quirksmode অনুযায়ী । আপনি যদি ক্রস-ব্রাউজারের সামঞ্জস্যের বিষয়ে চিন্তা করেন তবে এই ধরণটি অনুসরণ করা ভাল following

• আইডি দ্বারা ধারক উপাদান পান।
• ট্যাগ নামে প্রয়োজনীয় শিশু উপাদান পান।
• বাচ্চাদের উপরে আইট্রেট করুন, ক্লাসনেমের সাথে মিল রেখে পরীক্ষা করুন property
• 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

এর জন্য ধন্যবাদ - যদিও এটি কোনও অ্যাডমিন বিভাগের জন্য এটি কোনও বিশাল সমস্যা নয় তবে সত্যিই একজন ব্যক্তি এটি ব্যবহার করবে .... তবে তারপরেও আপনার মন্তব্যগুলি বিবেচনায় নেবে।

— ব্রেট

@ ব্রেট - যেভাবেই হোক! এটি আপনার সময় কয়েক মিনিট সময় নেবে এবং আপনি অফিসে অতিরিক্ত হাই-

— ফাইভান্স পাবেন

ঠিক আছে আমি এটি চেষ্টা করেছি ... যখন আমি একটি সতর্কতা করেছি তখন এটি উপাদানগুলির সঠিক পরিমাণের প্রতিবেদন করেছিল, তবে এটি কেবল এই শ্রেণীর নাম দিয়ে চারটির মধ্যে দুজনকে সরিয়ে নিয়েছে এবং আমি এই ত্রুটিটি পেয়েছি: কল_রাপর [i] অপরিজ্ঞাত is আমি আমার ব্যবহৃত কোডটি দিয়ে আমার পোস্টটি আপডেট করব।

— ব্রেট

@ ব্রেট - যদি আপনি আগ্রহী হন তবে আমি আপনার আপডেট কোডটি সংশোধন করেছি এবং সমস্যার বিষয়ে মন্তব্য করেছি।

— karim79

ম্যান, এটি আমাকে গত দু' ঘন্টা ধরে স্ট্যাম্প করে ফেলেছে এমন কোনও সমস্যা নিয়ে কল্পনা করার চেয়েও বেশি সাহায্য করেছে। ধন্যবাদ!

— জুল্যান্ডার

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

উদাহরণস্বরূপ আপনি ব্যবহারকারীর তথ্য সরানোর জন্য এই পৃষ্ঠায় করতে পারেন

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

এই প্রশ্নটি ক্লাসনেম দ্বারা অপসারণ করতে বলা হয়েছে

— জোটিডি 21

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 স্প্রেড অপারেটরের কারণে ডকুমেন্ট.জেট এলিমেন্টবাইক্ল্যাশনেম একটি এইচটিএমএল সংগ্রহ প্রদান করে।

[...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

@ টোক্কভিলে পোস্ট করা প্রশ্নটি লুপের জন্য ব্যবহার করেছে আমি কেবল তার কোডটির ন্যূনতম পরিবর্তনগুলি দিয়ে কীভাবে বাগটি ঠিক করব তা নির্দেশ করছিলাম।

— shao.lo

Answer 16

আপনি একটি সহজ সমাধান ব্যবহার করতে পারেন, কেবল ক্লাস পরিবর্তন করুন, এইচটিএমএল সংগ্রহ ফিল্টার আপডেট হয়েছে:

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

Comments

লুপের অ্যারে লুপের ভিতরেই পরিবর্তিত হওয়ায় এটি কাজ করবে না। ফলাফলটি হ'ল শেষ উপাদানটি এড়িয়ে যাবে।

— tocqueville