ID මගින් මූලද්‍රව්‍යය ඉවත් කරන්න

සම්මත ජාවාස්ක්‍රිප්ට් සහිත මූලද්‍රව්‍යයක් ඉවත් කිරීමේදී, ඔබ පළමුව එහි මවුපියන් වෙත යා යුතුය:

var element = document.getElementById("element-id");
element.parentNode.removeChild(element);

මුලින් මව් නෝඩයට යෑම මට ටිකක් අමුතු දෙයක් ලෙස පෙනේ, ජාවාස්ක්‍රිප්ට් මේ ආකාරයට ක්‍රියා කිරීමට හේතුවක් තිබේද?

දේශීය DOM කාර්යයන් වැඩි දියුණු කිරීම සැමවිටම හොඳම හෝ වඩාත්ම ජනප්‍රිය විසඳුම නොවන බව මම දනිමි, නමුත් මෙය නවීන බ්‍රව්සර් සඳහා හොඳින් ක්‍රියා කරයි.

Element.prototype.remove = function() {
    this.parentElement.removeChild(this);
}
NodeList.prototype.remove = HTMLCollection.prototype.remove = function() {
    for(var i = this.length - 1; i >= 0; i--) {
        if(this[i] && this[i].parentElement) {
            this[i].parentElement.removeChild(this[i]);
        }
    }
}

එවිට ඔබට මේ වගේ අංග ඉවත් කළ හැකිය

document.getElementById("my-element").remove();

හෝ

document.getElementsByClassName("my-elements").remove();

සටහන: මෙම විසඳුම IE 7 සහ ඊට පහළින් ක්‍රියා නොකරයි. DOM දීර් ing කිරීම පිළිබඳ වැඩි විස්තර සඳහා මෙම ලිපිය කියවන්න .

සංස්කරණය කරන්න : 2019 දී මගේ පිළිතුර සමාලෝචනය node.remove()කිරීම, ගලවා ගැනීමට පැමිණ ඇති අතර එය පහත පරිදි භාවිතා කළ හැකිය (ඉහත පොලිෆිල් නොමැතිව):

document.getElementById("my-element").remove();

හෝ

[...document.getElementsByClassName("my-elements")].map(n => n && n.remove());

මෙම කාර්යයන් සියලුම නවීන බ්‍රව්සර්වල ඇත (IE නොවේ). MDN පිළිබඳ වැඩිදුර කියවන්න .

හරස් බ්‍රව්සරය සහ IE> = 11:

document.getElementById("element-id").outerHTML = "";

ඔබට removeසෑම විටම ඒ ගැන සිතීමට අවශ්‍ය නොවන පරිදි ඔබට ශ්‍රිතයක් කළ හැකිය :

function removeElement(id) {
    var elem = document.getElementById(id);
    return elem.parentNode.removeChild(elem);
}

එය DOM සහාය දක්වයි . "ඉවත් කරන්න" හෝ "මකන්න" සඳහා එම පිටුව සොයන්න සහ ඉවත් කරන්න චිල්ඩ් යනු නෝඩයක් ඉවත් කරන එකම එකකි.

DOM සංවිධානය කර ඇත්තේ නෝඩ් ගසක වන අතර, සෑම නෝඩයකම වටිනාකමක් ඇති අතර එහි ළමා නෝඩ් වෙත යොමු ලැයිස්තුවක් ඇත. එබැවින් element.parentNode.removeChild(element)අභ්‍යන්තරව සිදුවන්නේ කුමක්ද යන්න හරියටම අනුකරණය කරයි: පළමුව ඔබ මව් නෝඩයට යන්න, ඉන්පසු ළමා නෝඩයට යොමු කිරීම ඉවත් කරන්න.

DOM4 වන විට, එකම දේ කිරීමට සහායක ශ්‍රිතයක් සපයනු ලැබේ : element.remove(). මෙය බ්‍රව්සර් වලින් 87% ක් තුළ ක්‍රියාත්මක වේ (2016 වන විට), නමුත් IE 11 නොවේ. ඔබට පැරණි බ්‍රව්සර් සඳහා සහාය වීමට අවශ්‍ය නම්, ඔබට:

• දී මෙන්, මව් node එකක් මතම ඊට අදාල හරහා අංග ඉවත් කරන්න ප්රශ්නය ,
• ජොහාන් ඩෙට්මාර්ගේ පිළිතුරෙහි මෙන් ස්වදේශීය DOM කාර්යයන් වෙනස් කරන්න , හෝ
• DOM4 පොලිෆිල් එකක් භාවිතා කරන්න .

එක් අංගයක් ඉවත් කිරීම සඳහා:

 var elem = document.getElementById("yourid");
 elem.parentElement.removeChild(elem);

උදාහරණයක් ලෙස කිසියම් පන්ති නාමයක් සහිත සියලුම අංග ඉවත් කිරීම සඳහා:

 var list = document.getElementsByClassName("yourclassname");
 for(var i = list.length - 1; 0 <= i; i--)
 if(list[i] && list[i].parentElement)
 list[i].parentElement.removeChild(list[i]);

ඔබට භාවිතා කළ හැකිය element.remove()

මෙම ChildNode.remove()ක්රමය සහ එයට අයත් ගස් වලින් වස්තුව ඉවත් කරයි.

https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove

මෙන්න ඔබට ඇමතුමක් ගත හැකි ආකාරය පෙන්වන ෆෙඩෙල් එකකි document.getElementById('my-id').remove()

https://jsfiddle.net/52kp584L/

**

NodeList දීර් extend කිරීමේ අවශ්‍යතාවයක් නොමැත. එය දැනටමත් ක්රියාත්මක කර ඇත.

**

remove()DOM ක්‍රමය භාවිතා කිරීමෙන් ඔබට එම මූලද්‍රව්‍යය කෙලින්ම ඉවත් කළ හැකිය .

මෙන්න උදාහරණයක්:

let subsWrapper = document.getElementById("element_id");
subsWrapper.remove();
//OR directly.
document.getElementById("element_id").remove();

සංවර්ධන වත්මන් අනුවාදය වන DOM මට්ටමේ 4 උපැස්, අනුව, ලබා ගත හැකි අතර ඇතැම් නව හුරුබුහුටි විකෘති ක්රම තිබෙනවා: append(), prepend(), before(), after(), replace(), සහ remove().

https://catalin.red/removing-an-element-with-plain-javascript-remove-method/

මුලින් මව් නෝඩයට යෑම මට ටිකක් අමුතු දෙයක් ලෙස පෙනේ, ජාවාස්ක්‍රිප්ට් මේ ආකාරයට ක්‍රියා කිරීමට හේතුවක් තිබේද?

ශ්‍රිතයේ නම වන අතර removeChild(), දෙමව්පියන් නොමැති විට දරුවා ඉවත් කළ හැක්කේ කෙසේද? :)

අනෙක් අතට, ඔබ පෙන්වා ඇති පරිදි සෑම විටම එය ඇමතිය යුතු නැත. element.parentNodeදී ඇති නෝඩයේ මව් නෝඩය ලබා ගැනීමට සහායකයකු පමණි. ඔබ දැනටමත් මව් නෝඩය දන්නේ නම්, ඔබට එය මේ ආකාරයෙන් භාවිතා කළ හැකිය:

උදා:

// Removing a specified element when knowing its parent node
var d = document.getElementById("top");
var d_nested = document.getElementById("nested");
var throwawayNode = d.removeChild(d_nested);

https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild

============================================= =======

තවත් යමක් එකතු කිරීමට:

සමහර පිළිතුරු පෙන්වා දී ඇත්තේ භාවිතා කිරීම වෙනුවට parentNode.removeChild(child);ඔබට භාවිතා කළ හැකි elem.remove();බවයි. නමුත් මා දැක ඇති පරිදි, කාර්යයන් දෙක අතර වෙනසක් ඇති අතර, එම පිළිතුරු වල එය සඳහන් නොවේ.

ඔබ භාවිතා කරන්නේ නම් removeChild(), එය ඉවත් කළ නෝඩයට යොමු කිරීමක් ලබා දෙනු ඇත.

var removedChild = element.parentNode.removeChild(element); 
console.log(removedChild); //will print the removed child.

නමුත් ඔබ භාවිතා කරන්නේ නම් elem.remove();, එය ඔබට යොමු කිරීම ලබා නොදේ.

var el = document.getElementById('Example');
var removedChild = el.remove(); //undefined

https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove

මෙම හැසිරීම ක්‍රෝම් සහ එෆ්එෆ් හි නිරීක්ෂණය කළ හැකිය. එය විශ්වාස කිරීම වටී යැයි මම විශ්වාස කරමි :)

මගේ පිළිතුර ප්‍රශ්නයට යම් වටිනාකමක් එක් කරන අතර එය ප්‍රයෝජනවත් වේ යැයි සිතමි !!

Ele.parentNode.removeChild (ele) භාවිතා කරන කාර්යයන් ඔබ විසින් සාදන ලද නමුත් තවමත් HTML තුළට ඇතුළත් කර නොමැති මූලද්‍රව්‍ය සඳහා ක්‍රියා නොකරනු ඇත. JQuery සහ මූලාකෘති වැනි පුස්තකාල එම සීමාව මගහරවා ගැනීම සඳහා පහත සඳහන් ක්‍රමවේදයන් wis ානවන්තව භාවිතා කරයි.

_limbo = document.createElement('div');
function deleteElement(ele){
    _limbo.appendChild(ele);
    _limbo.removeChild(ele);
}

මම හිතන්නේ ජාවාස්ක්‍රිප්ට් එලෙස ක්‍රියා කරන්නේ DOM හි මුල් නිර්මාණකරුවන් දෙමව්පියන් / ළමයින් සහ පෙර / ඊළඟ සංචාලනය අද එතරම් ජනප්‍රිය වී ඇති DHTML වෙනස් කිරීම් වලට වඩා ඉහළ ප්‍රමුඛතාවයක් ලෙස තබා ඇති බැවිනි. 90 දශකයේ මැද භාගයේ දී එක් <ආදාන වර්ගය = 'පෙළ'> වෙතින් කියවීමට හා DOM හි සාපේක්ෂ ස්ථානයකින් තවත් කෙනෙකුට ලිවීමට හැකිවීම ප්‍රයෝජනවත් විය. මෙය සමස්ත HTML ආකෘතිවල හෝ අන්තර්ක්‍රියාකාරී GUI මූලද්‍රව්‍යයන්ගේ ගතික පරම්පරාව යන්තම් දෙදරුම් කයි. සමහර සංවර්ධකයින්ගේ ඇස.

මුලින් මව් නෝඩයට යෑම මට ටිකක් අමුතු දෙයක් ලෙස පෙනේ, ජාවාස්ක්‍රිප්ට් මේ ආකාරයට ක්‍රියා කිරීමට හේතුවක් තිබේද?

IMHO: මේ සඳහා හේතුව මම වෙනත් පරිසරවල දැක ඇති ආකාරයටමයි: ඔබ යම් දෙයකට ඔබගේ “සබැඳිය” මත පදනම්ව ක්‍රියාවක් සිදු කරයි. ඔබ එයට සම්බන්ධ වී සිටියදී ඔබට එය මකා දැමිය නොහැක.

ගස් කකුලක් කපනවා වගේ. කපන අතරතුර ගසට කිට්ටුවෙන් වාඩි වී සිටින්න හෝ ප්‍රති result ලය වනු ඇත ... අවාසනාවන්ත (විහිලු වුවත්).

මෙය සැබවින්ම ෆයර්ෆොක්ස් වෙතින් පැමිණේ ... එක් වරක්, අයිඊ ඇසුරුමට වඩා ඉදිරියෙන් සිටි අතර මූලද්‍රව්‍යයක් කෙලින්ම ඉවත් කිරීමට ඉඩ දුන්නේය.

මෙය මගේ උපකල්පනය පමණි, නමුත් ඔබ දෙමව්පියන් හරහා දරුවෙකු ඉවත් කළ යුතු බවට හේතුව ෆයර්ෆොක්ස් විසින් යොමු කළ ආකාරය පිළිබඳ ගැටළුවක් බව මම විශ්වාස කරමි.

ඔබ වස්තුවක් සෘජුවම හරි-කරී කිරීමට කැඳවන්නේ නම්, එය මිය ගිය විගසම, ඔබ තවමත් එම සඳහන තබාගෙන සිටී. මෙය අප්රසන්න දෝෂ කිහිපයක් නිර්මාණය කිරීමේ විභවයක් ඇත ... එය ඉවත් කිරීමට අපොහොසත් වීම, එය ඉවත් කිරීම නමුත් වලංගු යැයි පෙනෙන යොමු කිරීම් තබා ගැනීම හෝ මතක කාන්දු වීම වැනි.

මම විශ්වාස කරන්නේ ඔවුන් ගැටලුව වටහා ගත් විට, එහි කර්තව්‍යය වූයේ එහි මූලද්‍රව්‍යය එහි මවුපියන් හරහා ඉවත් කිරීමයි. මන්ද එම මූලද්‍රව්‍යය නැති වූ විට, ඔබ දැන් දෙමව්පියන් වෙත යොමු කිරීමක් කර ඇති බැවිනි. මෙය සියලු අප්‍රසන්න භාවය නවත්වනු ඇති අතර (නිදසුනක් ලෙස ගස් නෝඩයක් නෝඩ් එකකින් වසා දැමුවහොත්) 'සිප්-අප්' වෙනුවට මනාව ගැලපේ.

එය පහසුවෙන් විසඳිය හැකි දෝෂයක් විය යුතුය, නමුත් වෙබ් ක්‍රමලේඛනයේ වෙනත් බොහෝ දේ මෙන්ම, නිකුතුව ඉක්මන් විය, මෙය මෙයට මඟ පෑදිය හැකිය ... ඊළඟ අනුවාදය පැමිණෙන විට, ප්‍රමාණවත් පුද්ගලයින් එය භාවිතා කරමින් සිටියේ මෙය වෙනස් කිරීම හේතු වනු ඇති බවයි කේත පොකුරක් කැඩීමට.

නැවතත්, මේ සියල්ල මගේ අනුමාන වැඩකි.

කෙසේ වෙතත්, වෙබ් ක්‍රමලේඛනය අවසානයේ සම්පූර්ණ වසන්ත පිරිසිදු කිරීමක් ලැබෙන දිනය දෙස මම බලා සිටිමි, මේ සියලු අමුතු කුඩා මෝඩකම් පිරිසිදු වන අතර සෑම දෙනාම එකම නීතිරීති අනුව සෙල්ලම් කිරීමට පටන් ගනී.

මගේ රොබෝ සේවකයා පසු වැටුප සඳහා නඩු පවරන දිනට පසු දින.

කෙටිම

මම සායි සුන්දර්ගේ පිළිතුර වැඩි දියුණු කරන්නේ OP හැඳුනුම්පත භාවිතා කරන නිසා getElementById:

elementId.remove();

box2.remove();          // remove BOX 2

this["box-3"].remove(); // remove BOX 3 (for Id with 'minus' character)

<div id="box1">My BOX 1</div>
<div id="box2">My BOX 2</div>
<div id="box-3">My BOX 3</div>
<div id="box4">My BOX 4</div>

මා තේරුම් ගත් පරිදි, නෝඩයක් කෙලින්ම ඉවත් කිරීම ෆයර්ෆොක්ස් හි ක්‍රියා නොකරයි, ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් පමණි. එබැවින්, ෆයර්ෆොක්ස් සඳහා සහය දැක්වීමට, ඔබ දරුවා ඉවත් කිරීමට දෙමව්පියන් වෙත යා යුතුය.

Ref: http://chiragrdarji.wordpress.com/2007/03/16/removedelete-element-from-page-using-javascript-working-in-firefoxieopera/

// http://javascript.crockford.com/memory/leak.html
// cleans dom element to prevent memory leaks
function domPurge(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) {
            domPurge(d.childNodes[i]);
       }
    }
}

function domRemove(id) {
    var elem = document.getElementById(id);
    domPurge(elem);
    return elem.parentNode.removeChild(elem);
}

ස්ක්‍රිප්ට් දෝෂයකින් තොරව මූලද්‍රව්‍යයක් ඉවත් කිරීමට හොඳම කාර්යය මෙයයි:

function Remove(EId)
{
    return(EObj=document.getElementById(EId))?EObj.parentNode.removeChild(EObj):false;
}

වෙත සටහන EObj=document.getElementById(EId).

මෙය එක සමාන ලකුණක් නොවේ ==.

මූලද්‍රව්‍යය EIdපවතින්නේ නම් ශ්‍රිතය එය ඉවත් කරයි, එසේ නොමැති නම් එය අසත්‍ය errorවේ.