জাভাস্ক্রিপ্ট DOM উপাদান সরান

Question

আমি এটি পরীক্ষার চেষ্টা করছি যে কোনও ডিওএম উপাদান উপস্থিত রয়েছে কিনা, এবং যদি এটি বিদ্যমান থাকে তবে এটি মুছুন, এবং যদি এটি বিদ্যমান না থাকে তবে এটি তৈরি করুন।

var duskdawnkey = localStorage["duskdawnkey"];
var iframe = document.createElement("iframe");
var whereto = document.getElementById("debug");
var frameid = document.getElementById("injected_frame");
iframe.setAttribute("id", "injected_frame");
iframe.setAttribute("src", 'http://google.com');
iframe.setAttribute("width", "100%");
iframe.setAttribute("height", "400");

if (frameid) // check and see if iframe is already on page
{ //yes? Remove iframe
    iframe.removeChild(frameid.childNodes[0]);
} else // no? Inject iframe
{
    whereto.appendChild(iframe);
    // add the newly created element and it's content into the DOM
    my_div = document.getElementById("debug");
    document.body.insertBefore(iframe, my_div);
}

এটি উপস্থিত রয়েছে কিনা তা খতিয়ে দেখা হচ্ছে, উপাদান তৈরি করা কাজ করে তবে উপাদান মুছে ফেলা যায় না। মূলত এই সমস্ত কোডটি হ'ল একটি বোতামে ক্লিক করে একটি ওয়েবপৃষ্ঠায় একটি আইফ্রেম ইনজেকশন করা। আমি যদি ঘটতে চাই তবে তা হ'ল যদি ইফ্রেমে ইতিমধ্যে এটি মুছে ফেলা হয়। তবে কোনও কারণে আমি ব্যর্থ হচ্ছি।

Comments

জাভাস্ক্রিপ্টের

— জাজ

Answer 1

removeChild পিতামাতাকে অনুরোধ করা উচিত, অর্থাত:

parent.removeChild(child);

আপনার উদাহরণে, আপনার এমন কিছু করা উচিত:

if (frameid) {
    frameid.parentNode.removeChild(frameid);
}

Comments

ধন্যবাদ আমি আপনার পোস্টটি পড়ার ঠিক আগে এটি আবিষ্কার করে ফেলেছি। এটিকে পরিবর্তন করতে হয়েছিল যেখানে.রেমোচিল্ড (যেখানে.চাইল্ড নোডস [0]);

— জোশুয়া রেডফিল্ড

এটি ধরে নিয়েও কাজ করবে যে আপনার ফ্রেম সর্বদা debugডিভের প্রথম সন্তান । ব্যবহার parentNodeকরা একটি আরও সাধারণ সমাধান যা কোনও উপাদানগুলির সাথে কাজ করবে।

— ক্যাসাব্ল্যাঙ্কা

এই সমাধানটি যথেষ্ট নাও হতে পারে। যদি কেউ এটি পড়ছেন তবে দয়া করে গ্লেনের পরামর্শটি দেখুন

— সেবাস

Answer 2

অধিকাংশ ব্রাউজার ইন, কলিং চেয়ে DOM থেকে একটি উপাদান সরানোর একটি সামান্য আরো সংক্ষিপ্ত উপায় .removeChild(element)তার পিতা বা মাতা, যা শুধু কলে উপর element.remove()। যথাযথভাবে, এটি সম্ভবত ডিওএম থেকে কোনও উপাদান অপসারণের স্ট্যান্ডার্ড এবং আইডোমেটিক পদ্ধতিতে পরিণত হবে।

এই .remove()পদ্ধতিটি ২০১১ সালে ডিওএম লিভিং স্ট্যান্ডার্ডে যুক্ত করা হয়েছিল ( প্রতিশ্রুতিবদ্ধ ), এবং এরপরে ক্রোম, ফায়ারফক্স, সাফারি, অপেরা এবং এজ প্রয়োগ করেছে। এটি ইন্টারনেট এক্সপ্লোরারের কোনও সংস্করণে সমর্থিত নয়।

আপনি যদি পুরানো ব্রাউজারগুলিকে সমর্থন করতে চান তবে আপনার এটি ছাঁটাই করা দরকার। এটি খানিকটা বিরক্তিকর হয়ে দাঁড়ায়, উভয়ই কারণ যে কেউ এই পদ্ধতিগুলি অন্তর্নিহিত ডোম শিম তৈরি করেছে বলে মনে হয় না এবং আমরা কেবল পদ্ধতিটিকে একটি একক প্রোটোটাইপে যুক্ত করছি না; এটি এমন একটি পদ্ধতি ChildNode, যা কেবলমাত্র স্পেস দ্বারা সংজ্ঞায়িত একটি ইন্টারফেস এবং জাভাস্ক্রিপ্টে অ্যাক্সেসযোগ্য নয়, তাই আমরা এর প্রোটোটাইপে কোনও কিছুই যুক্ত করতে পারি না। সুতরাং আমাদের সমস্ত প্রোটোটাইপগুলি সন্ধান করতে হবে যা উত্তরাধিকার সূত্রে প্রাপ্ত হয় ChildNodeএবং এটি ব্রাউজারে সংজ্ঞায়িত হয় এবং সেগুলিতে যুক্ত .removeকরা যায়।

এখানে আমি যে শিমটি নিয়ে এসেছি, যা আমি IE 8 এ কাজটি নিশ্চিত করেছি।

(function () {
    var typesToPatch = ['DocumentType', 'Element', 'CharacterData'],
        remove = function () {
            // The check here seems pointless, since we're not adding this
            // method to the prototypes of any any elements that CAN be the
            // root of the DOM. However, it's required by spec (see point 1 of
            // https://dom.spec.whatwg.org/#dom-childnode-remove) and would
            // theoretically make a difference if somebody .apply()ed this
            // method to the DOM's root node, so let's roll with it.
            if (this.parentNode != null) {
                this.parentNode.removeChild(this);
            }
        };

    for (var i=0; i<typesToPatch.length; i++) {
        var type = typesToPatch[i];
        if (window[type] && !window[type].prototype.remove) {
            window[type].prototype.remove = remove;
        }
    }
})();

এটি IE 7 বা তার চেয়ে কম ক্ষেত্রে কাজ করবে না, যেহেতু আই 8 এর আগে DOM প্রোটোটাইপগুলি বাড়ানো সম্ভব নয় । যদিও আমি অনুমান করি যে ২০১৫ এর ধারে, বেশিরভাগ লোককে এই জাতীয় জিনিসগুলির যত্ন নেওয়ার দরকার নেই।

একবার আপনি এগুলি শিম অন্তর্ভুক্ত করার পরে, আপনি elementকেবল কল করে ডোম থেকে একটি ডিওএম উপাদান সরাতে সক্ষম হবেন

element.remove();

Comments

এইমাত্র এখানে রেখে যাচ্ছেন: পলিটফিল.আইও / ভি ২ / ডকস / ফিচারস / # এলিমেট_প্রোটোটাইপ_আমো যদি আপনি সেই স্বয়ংক্রিয় পলিফিল পরিষেবা অন্তর্ভুক্ত করেন তবে আপনি IE 7.

— সঙ্গতিপূর্ণ

আপনি যতক্ষণ না IE সম্পর্কে চিন্তা করেন না ততক্ষণ 2017 এ এটি অবশ্যই করার উপায়। দেখুন: বিকাশকারী.মোজিলা.আর.ইন-

— ইউএস

Answer 3

দেখে মনে হচ্ছে আমার কাছে কোনও মন্তব্য পোস্ট করার মতো যথেষ্ট প্রতিনিধি নেই, তাই অন্য একটি উত্তর করতে হবে।

আপনি যখন সরানচাইল্ড () ব্যবহার করে বা পিতা-মাতার উপর অভ্যন্তরীণ এইচটিএমএল সম্পত্তি সেট করে কোনও নোডকে লিঙ্কযুক্ত করেন, তখন আপনাকে এটিও নিশ্চিত করতে হবে যে এটির উল্লেখ করার মতো অন্য কিছু নেই অন্যথায় এটি আসলে ধ্বংস হবে না এবং মেমরি ফাঁস হতে পারে। অনেকগুলি উপায় রয়েছে যেখানে আপনি রিমুডচাইল্ড () কে কল করার আগে নোডের জন্য একটি রেফারেন্স নিতে পারতেন এবং আপনাকে অবশ্যই নিশ্চিত করতে হবে যে সেই উল্লেখগুলি যে সুযোগের বাইরে যায়নি সেগুলি স্পষ্টভাবে সরানো হয়েছে।

ডগ ক্রকফোর্ড এখানে লিখেছেন যে ইভেন্ট হ্যান্ডলারগুলি আইইতে বিজ্ঞপ্তি সংক্রান্ত কারণগুলির কারণ হিসাবে পরিচিত এবং এটি রিমুডচাইল্ড () কে কল করার আগে নীচে পরিষ্কারভাবে এগুলি সরিয়ে ফেলার পরামর্শ দেয়

function purge(d) {
    var a = d.attributes, i, l, n;
    if (a) {
        for (i = a.length - 1; i >= 0; i -= 1) {
            n = a[i].name;
            if (typeof d[n] === 'function') {
                d[n] = null;
            }
        }
    }
    a = d.childNodes;
    if (a) {
        l = a.length;
        for (i = 0; i < l; i += 1) {
            purge(d.childNodes[i]);
        }
    }
}

এমনকি যদি আপনি অনেক সাবধানতা অবলম্বন করেন তবে আপনি জেনস-ইনগো ফারলে এখানে বর্ণিত আইইতে মেমরি ফাঁস পেতে পারেন ।

এবং পরিশেষে, জাভাস্ক্রিপ্ট মুছে ফেলা উত্তর যে ভেবে জাল ফেলবেন না। এটি অনেকের দ্বারা প্রস্তাবিত বলে মনে হয়, তবে কাজটি করবে না। কঙ্গ্যাক্স দ্বারা মুছে ফেলা বোঝার বিষয়ে এখানে একটি দুর্দান্ত রেফারেন্স ।

Comments

সম্ভবত আপনি কিছু জেএসফিডেল এটি প্রমাণ করতে পারেন। ধন্যবাদ

— মুহাইমিন

আমি এই আচরণটি নিশ্চিত করি। আমার কাঠামোটি ডোম বিন্যাসের উপরে একটি জাভাস্ক্রিপ্ট অবজেক্ট ম্যাপিং ট্রি ব্যবহার করে। প্রতিটি জেএস বস্তু তার ডোম উপাদানটির উল্লেখ করে। যদিও আমি element.parentNode.removeChildউপাদানগুলি অপসারণের জন্য কল করি , তারা জীবিত থাকে এবং এখনও রেফারেন্স পেতে পারে। এগুলি কেবল নিয়মিত ডোম গাছে দেখা যায় না।

— সেবাস

হ্যাঁ, এবং তারপরে সেই জেএস ম্যাপিং অবজেক্টের গ্লোবাল পয়েন্টারটি সরিয়ে ফেলা জঞ্জাল থেকে আবর্জনা সংগ্রহকারীকে আনলক করে। এটি গৃহীত উত্তরের একটি গুরুত্বপূর্ণ সংযোজন।

— সেবাস

Answer 4

নোড.রেমভচাইল্ড () ব্যবহার করা আপনার পক্ষে কাজ করে, এই জাতীয় কিছু ব্যবহার করুন:

var leftSection = document.getElementById('left-section');
leftSection.parentNode.removeChild(leftSection);

ডম 4 এ, অপসারণ পদ্ধতি প্রয়োগ করা হয়েছে তবে ডাব্লু 3 সি অনুসারে একটি দুর্বল ব্রাউজার সমর্থন রয়েছে:

পদ্ধতি নোড.রেমোভ () DOM 4 স্পেসিফিকেশনে প্রয়োগ করা হয়। তবে ব্রাউজারের দুর্বল সমর্থনের কারণে আপনার এটি ব্যবহার করা উচিত নয়।

আপনি যদি jQuery ব্যবহার করেন তবে আপনি অপসারণ পদ্ধতিটি ব্যবহার করতে পারেন ...

$('#left-section').remove(); //using remove method in jQuery

এছাড়াও নতুন ফ্রেমওয়ার্কগুলিতে আপনি কোনও উপাদান অপসারণ করতে শর্তাদি ব্যবহার করতে পারেন, উদাহরণস্বরূপ *ngIfকৌণিক এবং প্রতিক্রিয়াতে, বিভিন্ন মতামত উপস্থাপন করা শর্তগুলির উপর নির্ভর করে ...

Comments

আপনি যদি জ্রেতে ক্রিয়েলমেন্ট ব্যবহার করে মডেল নোড তৈরি করে থাকেন তবে নোডটি অপসারণের আগে এটি বিদ্যমান কিনা তা পরীক্ষা করে দেখুন make যদি (বামপন্থা) {..আপনার কোড এর কাজটি করা উচিত।

— আফসান আব্দুলালী গুজরাটি

Answer 5

আপনি যদি উজ্জ্বল ফাংশনটি ব্যবহার করে খুশি হন:

$("#foo").remove();

DOM থেকে উপাদানটি পুরোপুরি মুছতে।

ডেটা এবং ইভেন্টগুলি সরিয়ে না দিয়ে উপাদানগুলি সরাতে, পরিবর্তে এটি ব্যবহার করুন:

$("#foo").detach();

jQuery ডক্স

.remove()পদ্ধতি DOM এর বাইরে উপাদান লাগে। .remove()আপনি যখন উপাদানটি নিজেই অপসারণ করতে চান তখন ব্যবহার করুন । উপাদানগুলি এগুলি ছাড়াও, উপাদানগুলির সাথে সম্পর্কিত সমস্ত সীমাবদ্ধ ইভেন্ট এবং jQuery ডেটা সরানো হয়। ডেটা এবং ইভেন্টগুলি সরিয়ে না দিয়ে উপাদানগুলি সরাতে, .detach()পরিবর্তে ব্যবহার করুন।