जावास्क्रिप्ट का उपयोग करके HTML तत्व कैसे निकालें?

124

मैं कुल नौसिखिया हूं। क्या कोई मुझे बता सकता है कि मूल जावास्क्रिप्ट का उपयोग करके HTML तत्व को कैसे निकालना है jQuery नहीं।

index.html

<html>
<head>
 <script type="text/javascript" src="myscripts.js" > </script>
 <style>
 #dummy {
  min-width: 200px;
  min-height: 200px;
  max-width: 200px;
  max-height: 200px;
  background-color: #fff000;
 }
 </style>
</head>
<body>
 <div id="dummy"></div>

 <form>
  <input type="submit" value="Remove DUMMY" onclick="removeDummy(); "/>
 </form>
</body>

myscripts.js

function removeDummy() {
 var elem = document.getElementById('dummy');
 elem.parentNode.removeChild(elem);
}

सबमिट बटन पर क्लिक करने पर क्या होता है, यह बहुत कम समय के लिए गायब हो जाएगा और फिर तुरंत वापस दिखाई देगा। मैं बटन पर क्लिक करने पर तत्व को पूरी तरह से हटा देना चाहता हूं।

javascript html

— नौसिखिया कोडर
स्रोत

यदि मैं इसे क्लिक करता हूं, तो एक त्रुटि हुई है और स्टॉप दबाएं ?

— एलेक्स

क्षमा करें, यह विषय है, लेकिन यह वास्तव में मज़ेदार है, कि उसने / उसने खुद को "नौसिखिया कोडर" नाम दिया है और अब प्रोफ़ाइल की लगभग 9000 की प्रतिष्ठा है। "अच्छे पुराने समय" में कुछ पूछना वास्तव में आजकल बहुत लाभदायक है। :)

— रेने

189

क्या हो रहा है कि फॉर्म जमा हो रहा है, और इसलिए पृष्ठ को ताज़ा किया जा रहा है (इसकी मूल सामग्री के साथ)। आप संभाल रहे हैंclick ईवेंट को सबमिट बटन पर ।

यदि आप तत्व को हटाना चाहते हैं और फॉर्म जमा नहीं करना चाहते हैं, submitतो इसके बजाय फॉर्म पर ईवेंट को हैंडल करें , और falseअपने हैंडलर से वापस लौटें :

HTML:

<form  onsubmit="return removeDummy(); ">
    <input type="submit" value="Remove DUMMY"/>
</form>

जावास्क्रिप्ट:

function removeDummy() {
    var elem = document.getElementById('dummy');
    elem.parentNode.removeChild(elem);
    return false;
}

लेकिन आपको इसके लिए एक फॉर्म की आवश्यकता (या नहीं) चाहिए, नहीं तो इसका एकमात्र उद्देश्य डमी डिव को निकालना है। बजाय:

HTML:

<input type="button" value="Remove DUMMY" onclick="removeDummy()" />

जावास्क्रिप्ट:

function removeDummy() {
    var elem = document.getElementById('dummy');
    elem.parentNode.removeChild(elem);
    return false;
}

हालाँकि , इवेंट हैंडलर स्थापित करने की शैली पुराने जमाने की है। आपको लगता है कि आपके जावास्क्रिप्ट कोड की अपनी फ़ाइल और इस तरह में अच्छी वृत्ति है। अगला कदम इसे आगे ले जाना है और onXYZइवेंट हैंडलर को हुक करने के लिए विशेषताओं का उपयोग करने से बचें । इसके बजाय, अपने जावास्क्रिप्ट में, आप उन्हें नए (लगभग वर्ष 2000) तरीके से हुक कर सकते हैं:

HTML:

<input id='btnRemoveDummy' type="button" value="Remove DUMMY"/>

जावास्क्रिप्ट:

function removeDummy() {
    var elem = document.getElementById('dummy');
    elem.parentNode.removeChild(elem);
    return false;
}
function pageInit() {
    // Hook up the "remove dummy" button
    var btn = document.getElementById('btnRemoveDummy');
    if (btn.addEventListener) {
        // DOM2 standard
        btn.addEventListener('click', removeDummy, false);
    }
    else if (btn.attachEvent) {
        // IE (IE9 finally supports the above, though)
        btn.attachEvent('onclick', removeDummy);
    }
    else {
        // Really old or non-standard browser, try DOM0
        btn.onclick = removeDummy;
    }
}

... फिर अपने पृष्ठ के बहुत अंत में pageInit();एक scriptटैग से कॉल करें body(समापन </body>टैग से पहले ), या window loadघटना के भीतर से , हालांकि यह पृष्ठ लोड चक्र में बहुत देर से होता है और इसलिए आमतौर पर घटना को हुक करने के लिए अच्छा नहीं है। हैंडलर (यह बाद में होता है) सभी छवियों के अंत में लोड , उदाहरण के लिए)।

ध्यान दें कि मुझे ब्राउज़र अंतर से निपटने के लिए कुछ हैंडलिंग में रखना पड़ा है। आप शायद घटनाओं को हुक करने के लिए एक फ़ंक्शन चाहते हैं ताकि आपको हर बार उस तर्क को दोहराना न पड़े। या आपके लिए उन ब्राउज़र अंतरों को सुचारू करने के लिए jQuery , प्रोटोटाइप , YUI , क्लोजर या कई अन्य में से किसी एक पुस्तकालय का उपयोग करने पर विचार करें । यह बहुत महत्वपूर्ण अंतर्निहित सामान जावास्क्रिप्ट बुनियादी बातों और डोम बुनियादी बातों के संदर्भ में, चल रहा दोनों को समझने के लिए, लेकिन पुस्तकालयों विसंगतियों का एक बहुत से निपटने, और भी काम उपयोगिताओं का एक बहुत प्रदान करते हैं - ईवेंट हैंडलर्स कि ऊपर hooking के एक साधन के तरह से संबंधित है ब्राउज़र अंतर। उनमें से अधिकांश एक फ़ंक्शन सेट करने का एक तरीका भी प्रदान करते हैं (जैसेpageInit) जैसे ही window loadआग लगने से बहुत पहले डोम तैयार किया जाता है, चलाने के लिए ।

— टीजे क्राउडर
स्रोत

इसे बदलें type="button"या return false;अपने JS फ़ंक्शन में रखें

— Pav

@Pav: मुझे लगता है कि मैं जमा करने के लिए छड़ी हूँ क्योंकि यह सिर्फ एक प्रयोगात्मक अभ्यास है। मैं कुछ प्रोजेक्ट कर रहा हूं जो सबमिट का उपयोग करते हैं इसलिए मुझे बेहतर आदत है ... इस विचार के लिए वैसे भी धन्यवाद।

— नौसिखिया कोडर

@ नई: मैंने कुछ और नोट्स जोड़े।

— टीजे क्राउडर

2

सिर्फ हाथी ही क्यों करते हैं।

— मुहम्मद उमेर

1

@ Ghos3t - कुछ तरीके: 1. एक विशेषता-शैली हैंडलर से आपके द्वारा कॉल किए जाने वाले किसी भी फ़ंक्शन को एक वैश्विक होना चाहिए, और वैश्विक नाम स्थान पहले से ही वास्तव में भीड़ है ™ और यह एक फ़ंक्शन नाम चुनना आसान है जो कुछ और के साथ संघर्ष करता है (यह) एक संभावित-अद्वितीय नाम के साथ किसी वस्तु का उपयोग करके और उस पर अपने सभी हैंडलर लगाकर संबोधित किया जा सकता है)। 2. पुराने विशेषता-शैली के तरीके का उपयोग करें (या onxyzतत्व पर संपत्ति को असाइन करना ) केवल एक ही हैंडलर की अनुमति देता है , और यदि आप उस संपत्ति को असाइन करते हैं जो आप वहां इस्तेमाल करते हैं, तो यह दूसरों के साथ अच्छा नहीं खेलता है। (cont'd)

— टीजे क्राउडर

34

बस यह करो element.remove();

इसे यहाँ देखें

http://jsfiddle.net/4WGRP/

— मुहम्मद उमर
स्रोत

5

इसके साथ सावधानी बरतें, क्योंकि यह काफी नया जोड़ है, और इसमें IE और FF संस्करण 22 और इससे पहले के पूर्ण ब्राउज़र का समर्थन नहीं है ( लाल- team-design.com/… )।

— dule

1

मैं व्यक्तिगत रूप से इसे उपयोग करने के लिए एक और 5 साल इंतजार

— करूंगा

2

खैर, ऐसा लगता है कि यह अब फेल्ली समर्थित है: caniuse.com/#search=remove । मैं अब इसका इस्तेमाल करना स्वीकार करूंगा। यदि आपको IE11 का समर्थन करने की आवश्यकता है, तो मुझे लगता है कि एक

— पॉलीफिल

5

फ्यूचर-प्रूफ कोड लिखना अतीत के लिए प्रोग्रामिंग से बेहतर है। अपने आप को रखरखाव के समय को बचाएं, और उपयोग करें.remove()

— गिबोल्ट

9

आपको इनपुट प्रकार = "सबमिट" के बजाय इनपुट प्रकार = "बटन" का उपयोग करना चाहिए।

<form>
  <input type="button" value="Remove DUMMY" onclick="removeDummy(); "/>
 </form>

बुनियादी html और जावास्क्रिप्ट संसाधनों के लिए चेकआउट मोज़िला डेवलपर केंद्र

— CoderHawk
स्रोत

1

मैंने आपका लिंक W3Schools से Mozilla Developer Center में बदल दिया। मेरे तर्क के लिए w3fools.com पर एक नज़र है ... इसके अलावा, अच्छा जवाब :)

— एलेस्टेयर पिट्स

2

@ ऑल्टेयर पिट्स - इसकी ठीक है। मैं बस html और js के बुनियादी ट्यूटोरियल्स पर PO को इंगित करना चाहता हूं ..

— CoderHawk

8

आपका जावास्क्रिप्ट सही है आपके बटन में type="submit"पेज को ताज़ा करने का कारण है।

— पाव
स्रोत

5

यह फिर से प्रकट होता है क्योंकि आपका सबमिट बटन पृष्ठ को फिर से लोड करता है। इस व्यवहार को रोकने के लिए सबसे आसान तरीका है एक जोड़ने के लिए है return falseकरने के लिए onclickतो जैसे:

<input type="submit" value="Remove DUMMY" onclick="removeDummy(); return false;" />

— mVChr
स्रोत

4

इनपुट प्रकार को "बटन" में बदलें। जैसा कि टीजे और पाव ने कहा, फॉर्म जमा हो रहा है। आपकी जावास्क्रिप्ट सही दिखती है, और मैं इसे गैर-JQuery तरीके से आज़माने के लिए आपकी सराहना करता हूँ :)

— Newtang
स्रोत

मुझे लगता है कि मैं जमा करना चाहूंगा क्योंकि यह मेरी भविष्य की परियोजनाओं के लिए सिर्फ एक प्रयोगात्मक अभ्यास है जो सबमिट का उपयोग करता है इसलिए मुझे बेहतर आदत है ...

— नौसिखिया कोडर

4

index.html

<input id="suby" type="submit" value="Remove DUMMY"/>

myscripts.js

document.addEventListener("DOMContentLoaded", {
//Do this AFTER elements are loaded

    document.getElementById("suby").addEventListener("click", e => {
        document.getElementById("dummy").remove()
    })

})

— ई-motiv
स्रोत

3

यह सही कोड है। संभवतः जो कुछ हो रहा है वह है आपका फ़ॉर्म सबमिट हो रहा है, और आप नया पृष्ठ देखते हैं (जहां तत्व फिर से मौजूद होगा)।

— एलेक्स
स्रोत

3

अपनी स्क्रिप्ट में इस कोड को चलाने का प्रयास करें ।

document.getElementById("dummy").remove();

और यह तत्व / बटन को उम्मीद से हटा देगा।

— सिम रीपर
स्रोत

2

यह काम। divयदि आप बटन रखना चाहते हैं तो बस बटन "डमी" से हटा दें ।

function removeDummy() {
  var elem = document.getElementById('dummy');
  elem.parentNode.removeChild(elem);
  return false;
}

#dummy {
  min-width: 200px;
  min-height: 200px;
  max-width: 200px;
  max-height: 200px;
  background-color: #fff000;
}

<div id="dummy">
  <button onclick="removeDummy()">Remove</button>
</div>

स्निपेट का विस्तार करें

— Durtle02
स्रोत

1

मैं अभी भी एक नौसिखिया हूँ, लेकिन यहाँ एक सरल और आसान तरीका है: आप बाहरी HTML का उपयोग कर सकते हैं, जो पूरे टैग है, न कि किसी अन्य भाग में:

पूर्व: <tag id='me'>blahblahblah</tag>के innerHTML होगा blahblahblah, और outerHTML पूरी बात होगी, <tag id='me'>blahblahblah</tag>।

इसलिए, उदाहरण के लिए, यदि आप टैग को हटाना चाहते हैं, तो यह मूल रूप से उसके डेटा को हटा रहा है, इसलिए यदि आप बाहरी HTML को एक रिक्त स्ट्रिंग में बदलते हैं, तो यह इसे हटाने के समान है।

<body>
    <p id="myTag">This is going to get removed...</p>
    <input type="button" onclick="javascript:
        document.getElementById('myTag').outerHTML = '';//this makes the outerHTML (the whole tag, not what is inside it)
    " value="Remove Praragraph">
</body>

इसके बजाय, यदि आप इसे प्रदर्शित नहीं करना चाहते हैं, तो आप दृश्यता, अस्पष्टता और प्रदर्शन गुणों का उपयोग करके इसे JS में स्टाइल कर सकते हैं।

document.getElementById('foo').style.visibility = hidden;
//or
document.getElementById('foo').style.opacity = 0;
//or
document.getElementById('foo').style.display = none;

ध्यान दें कि opacity तत्व अभी भी प्रदर्शित करता है, बस आप इसे उतना नहीं देख सकते हैं। इसके अलावा, आप पाठ, कॉपी, पेस्ट का चयन कर सकते हैं और वह सब कुछ कर सकते हैं जो आप सामान्य रूप से कर सकते हैं, भले ही वह अदृश्य हो।

Visibility आपकी स्थिति को और अधिक फिट करता है, लेकिन यह एक खाली पारदर्शी जगह को छोड़ देगा जितना बड़ा तत्व इसे लागू किया गया था।

मैं आपको अपना वेबपृष्ठ बनाने के आधार पर आपको प्रदर्शन करने की सलाह दूंगा। मूल रूप से तत्व को आपके दृश्य से हटाते हुए प्रदर्शित करें, लेकिन आप इसे अभी भी DevTools में देख सकते हैं। उम्मीद है की यह मदद करेगा!

— HarryJamesPotter27
स्रोत