איך להסיר אלמנט HTML באמצעות Javascript?

אני חדש לגמרי. מישהו יכול להגיד לי איך להסיר אלמנט 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);
}

מה שקורה כשאני לוחץ על כפתור השליחה הוא שהוא ייעלם לזמן מאוד קצר ואז יופיע שוב מיד. אני רוצה להסיר לחלוטין את האלמנט כשאני לוחץ על הכפתור.

תשובה #1

מה שקורה הוא שהטופס נשלח, ולכן העמוד מתרענן (עם התוכן המקורי שלו). אתה מטפל באירוע 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;
}

אבל אתה לא צריך (או רוצה) טופס בשביל זה בכלל, לא אם המטרה היחידה שלו היא להסיר את ה-div המדומה. במקום זאת:

HTML :

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

ג'אווהסקריפט:

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

עם זאת, הסגנון הזה של קביעת מטפלי אירועים הוא מיושן. נראה שיש לך אינסטינקטים טובים בכך שקוד ה-JavaScript שלך נמצא בקובץ משלו וכדומה. הצעד הבא הוא לקחת את זה צעד נוסף ולהמנע משימוש ב-onXYZ לתכונות לחיבור מטפלי אירועים. במקום זאת, בקוד ה-JavaScript שלך, אתה יכול לחבר אותם בדרך החדשה יותר (מבסיבות שנת 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> הסוגר), או מתוך אירוע ה-load של window, אם כי זה קורה מאוחר מאוד במחזור טעינת הדף ולכן בדרך כלל לא טוב לחיבור מאזיני אירועים (זה קורה לאחר שכל התמונות נטענו סופית, לדוגמה).

שים לב שהיה עלי להוסיף טיפול כדי להתמודד עם הבדלים בין דפדפנים. סביר להניח שתרצה פונקציה לחיבור אירועים כדי שלא תצטרך לחזור על ההיגיון הזה כל פעם. או שקול להשתמש בספרייה כמו jQuery, Prototype, YUI, Closure, או בכל אחת מכמה אחרות כדי לאזן את ההבדלים בין הדפדפנים עבורך. זה מאוד חשוב להבין את הדברים הבסיסיים שמתרחשים, הן במונחים של יסודות JavaScript והן במונחים של יסודות DOM, אך ספריות מטפלות בהרבה אי-עקביות, ומספקות גם הרבה כלים שימושיים — כמו אמצעי לחיבור handlers של אירועים שמתמודד עם הבדלים בין דפדפנים. רובם גם מספקים דרך להגדיר פונקציה (כמו pageInit) לרוץ ברגע שה-DOM מוכן למניפולציה, הרבה לפני ש-window load מופעל.

תשובה #2

פשוט עשה את זה element.remove();

נסה את זה כאן תראה

http://jsfiddle.net/4WGRP/

תשובה #3

אתה צריך להשתמש ב-input type="button" במקום input type="submit".

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

בדוק את מרכז המפתחים של מוזילה למקורות בסיסיים של HTML ו-JavaScript