วิธีลบองค์ประกอบ HTML โดยใช้ Javascript

124

ฉันเป็นมือใหม่ทั้งหมด ใครช่วยบอกวิธีลบองค์ประกอบ HTML โดยใช้ Javascript ดั้งเดิมไม่ใช่ 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

— Newbie Coder
แหล่งที่มา

เกิดอะไรขึ้นถ้าฉันคลิกมันจุดผิดพลาดและกดหยุด ?

— alex

ขออภัยมันเป็นหัวข้อ แต่จริงๆแล้วมันตลกมากที่เขา / เธอตั้งชื่อเขาเองว่า "Newbie Coder" และตอนนี้โปรไฟล์มีชื่อเสียงอยู่ที่ประมาณ 9000 คนการถามบางสิ่งใน "สมัยก่อนที่ดี" เป็นประโยชน์อย่างมากในปัจจุบัน :)

— Rene

189

สิ่งที่เกิดขึ้นคือระบบกำลังส่งแบบฟอร์มและกำลังรีเฟรชหน้า (ด้วยเนื้อหาต้นฉบับ) คุณกำลังจัดการclickกิจกรรมด้วยปุ่มส่ง

หากคุณต้องการลบองค์ประกอบและไม่ส่งแบบฟอร์มให้จัดการsubmitเหตุการณ์ในแบบฟอร์มแทนแล้วส่งคืนfalseจากตัวจัดการของคุณ:

HTML:

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

JavaScript:

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

แต่คุณไม่ต้องการ (หรือต้องการ) แบบฟอร์มสำหรับสิ่งนั้นเลยไม่ใช่หากจุดประสงค์เดียวคือการลบ D Dummy div แทน:

HTML:

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

JavaScript:

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"/>

JavaScript:

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 , Prototype , YUI , Closureหรืออื่น ๆ อีกมากมายเพื่อปรับความแตกต่างของเบราว์เซอร์ให้คุณ เป็นสิ่งสำคัญมากที่จะต้องทำความเข้าใจกับสิ่งที่เกิดขึ้นทั้งในแง่ของพื้นฐาน JavaScript และพื้นฐาน DOM แต่ไลบรารีจะจัดการกับความไม่สอดคล้องกันมากมายและยังมียูทิลิตี้ที่มีประโยชน์มากมายเช่นวิธีการเชื่อมต่อตัวจัดการเหตุการณ์ที่เกี่ยวข้องกับ ความแตกต่างของเบราว์เซอร์ ส่วนใหญ่ยังมีวิธีตั้งค่าฟังก์ชัน (เช่นpageInit) เพื่อทำงานทันทีที่ DOM พร้อมที่จะจัดการก่อนที่จะwindow loadเกิดการยิง

— TJ Crowder
แหล่งที่มา

เปลี่ยนเป็นtype="button"หรือใส่return false;ในฟังก์ชัน JS ของคุณ

— Pav

@Pav: ฉันคิดว่าฉันจะต้องส่งต่อเพราะนี่เป็นเพียงแบบฝึกหัดทดลองเท่านั้น ฉันจะทำโปรเจ็กต์บางอย่างที่ใช้การส่งดังนั้นฉันจึงคุ้นเคยกับมันมากขึ้น ... ขอบคุณสำหรับแนวคิดนี้

— Newbie Coder

@ Newbie: ฉันได้เพิ่มบันทึกเพิ่มเติมอีกสองสามข้อ

— TJ Crowder

2

ทำไมไม่ทำ elem.remove ();

— Muhammad Umer

1

@ Ghos3t - สองวิธี: 1. ฟังก์ชั่นใด ๆ ที่คุณเรียกจากตัวจัดการสไตล์แอตทริบิวต์จะต้องเป็น global และเนมสเปซส่วนกลางนั้นมี Crowded ™อยู่แล้วและง่ายต่อการเลือกชื่อฟังก์ชันที่ขัดแย้งกับสิ่งอื่น (สิ่งนี้ สามารถแก้ไขได้โดยใช้ออบเจ็กต์ที่มีชื่อไม่ซ้ำกันและวางเครื่องจัดการทั้งหมดของคุณไว้) 2. ใช้วิธีสไตล์แอตทริบิวต์แบบเก่า (หรือกำหนดให้กับonxyzคุณสมบัติในองค์ประกอบ) อนุญาตให้ใช้ตัวจัดการเพียงตัวเดียวและหากคุณกำหนดให้กับคุณสมบัติคุณจะแทนที่สิ่งที่เคยมีอยู่ดังนั้นจึงไม่สามารถเล่นได้ดีกับผู้อื่น (ต่อ)

— TJ Crowder

34

เพียงแค่ทำสิ่งนี้ element.remove();

ลองดูที่นี่

http://jsfiddle.net/4WGRP/

— มูฮัมหมัดอุเมอร์
แหล่งที่มา

5

ระวังด้วยเนื่องจากดูเหมือนว่าจะเป็นส่วนเพิ่มเติมที่ค่อนข้างใหม่และไม่มีการรองรับเบราว์เซอร์อย่างสมบูรณ์เช่น IE และ FF เวอร์ชัน 22 และก่อนหน้า ( red-team-design.com/… )

— dule

1

ส่วนตัวฉันรออีก 5 ปีเพื่อใช้สิ่งนี้

— slebetman

2

ดีนี้ดูเหมือนว่าจะได้รับการสนับสนุน faily ขณะนี้: caniuse.com/#search=remove ฉันยอมรับที่จะใช้ตอนนี้ หากคุณต้องการสนับสนุน IE11 อย่างแน่นอนฉันคิดว่า polyfill สามารถสร้างได้อย่างง่ายดาย ...

— jehon

5

การเขียนโค้ดในอนาคตดีกว่าการเขียนโปรแกรมในอดีต ประหยัดเวลาในการบำรุงรักษาและใช้งาน.remove()

— Gibolt

9

คุณควรใช้ input type = "button" แทน input type = "submit"

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

Checkout Mozilla Developer Centerสำหรับทรัพยากร html และ JavaScript พื้นฐาน

— CoderHawk
แหล่งที่มา

1

ฉันเปลี่ยนลิงค์ของคุณจาก W3Schools เป็น Mozilla Developer Center ลองดูที่w3fools.comสำหรับเหตุผลของฉัน ... นอกเหนือจากนั้นคำตอบที่ดี :)

— Alastair Pitts

2

@Alastair Pitts - ไม่เป็นไร ฉันแค่ต้องการชี้ PO ไปที่แบบฝึกหัดพื้นฐาน html และ js ..

— CoderHawk

8

JavaScript ของคุณถูกต้อง ปุ่มของคุณtype="submit"ทำให้หน้ารีเฟรช

— Pav
แหล่งที่มา

5

ปรากฏขึ้นอีกครั้งเนื่องจากปุ่มส่งของคุณโหลดหน้าเว็บซ้ำ วิธีที่ง่ายที่สุดในการป้องกันพฤติกรรมนี้คือการเพิ่มสิ่งreturn falseที่onclickคล้ายกัน:

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

— mVChr
แหล่งที่มา

4

เปลี่ยนประเภทอินพุตเป็น "ปุ่ม" ตามที่ TJ และ Pav กล่าวว่าแบบฟอร์มกำลังได้รับการส่ง Javascript ของคุณถูกต้องและฉันขอชมเชยคุณที่ลองใช้วิธีที่ไม่ใช่ JQuery :)

— Newtang
แหล่งที่มา

ฉันคิดว่าฉันจะต้องส่งต่อเพราะนี่เป็นเพียงแบบฝึกหัดทดลองสำหรับโครงการในอนาคตของฉันที่ใช้การส่งดังนั้นฉันจึงคุ้นเคยกับมันมากขึ้น ...

— Newbie Coder

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

})

— E-Motiv
แหล่งที่มา

3

นั่นคือรหัสที่ถูกต้อง สิ่งที่อาจเกิดขึ้นคือการส่งแบบฟอร์มของคุณและคุณเห็นหน้าใหม่ (ซึ่งจะมีองค์ประกอบอีกครั้ง)

— อเล็กซ์
แหล่งที่มา

3

ลองใช้รหัสนี้ไว้ในสคริปต์

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

และหวังว่าจะลบองค์ประกอบ / ปุ่ม

— Sim Reaper
แหล่งที่มา

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

ฉันก็ยังเป็นมือใหม่เหมือนกัน แต่นี่เป็นวิธีง่ายๆวิธีหนึ่ง: คุณสามารถใช้ outerHTML ซึ่งเป็นแท็กทั้งหมดไม่ใช่แค่บางส่วน:

EX: <tag id='me'>blahblahblah</tag>'s innerHTML จะเป็นblahblahblahและ outerHTML <tag id='me'>blahblahblah</tag>จะเป็นสิ่งที่ทั้ง

ตัวอย่างเช่นหากคุณต้องการลบแท็กโดยพื้นฐานแล้วจะเป็นการลบข้อมูลดังนั้นหากคุณเปลี่ยน outerHTML เป็นสตริงว่างก็เหมือนกับการลบ

<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
แหล่งที่มา