Jak usunąć element HTML za pomocą JavaScript?

124

Jestem całkowitym nowicjuszem. Czy ktoś może mi powiedzieć, jak usunąć element HTML przy użyciu oryginalnego JavaScript, a nie 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);
}

Gdy kliknę przycisk przesyłania, zniknie on na bardzo krótki czas, a następnie natychmiast pojawi się z powrotem. Chcę całkowicie usunąć element po kliknięciu przycisku.

javascript html Newbie Coder
źródło

Co się stanie, jeśli kliknę, zauważę błąd i naciśnę stop ?

Alex

Przepraszamy, to jest temat, ale to naprawdę zabawne, że nazwał się "Newbie Coder", a teraz profil ma reputację około 9000. Pytanie o coś w "starych dobrych czasach" jest obecnie naprawdę opłacalne. :)

Rene

189

Dzieje się tak, że formularz jest przesyłany, a więc strona jest odświeżana (z oryginalną zawartością). Obsługujesz clickzdarzenie za pomocą przycisku przesyłania.

Jeśli chcesz usunąć element i nie przesyłać formularza, submitzamiast tego obsłuż zdarzenie w formularzu i wróć falsez modułu obsługi:

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;
}

Ale w ogóle nie potrzebujesz (ani nie chcesz) formularza do tego, nie jeśli jego jedynym celem jest usunięcie fikcyjnego div. Zamiast:

HTML:

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

JavaScript:

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

Jednak ten styl konfigurowania programów obsługi zdarzeń jest przestarzały. Wydaje się, że masz dobry instynkt, ponieważ Twój kod JavaScript znajduje się we własnym pliku i tak dalej. Następnym krokiem jest pójście dalej i uniknięcie używania onXYZatrybutów do podłączania programów obsługi zdarzeń. Zamiast tego w swoim JavaScript możesz je połączyć z nowszym (około roku 2000) sposobem:

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;
    }
}

... następnie wywołaj pageInit();z scripttagu na samym końcu strony body(tuż przed </body>tagiem zamykającym ) lub z poziomu window loadzdarzenia, chociaż dzieje się to na bardzo późnym etapie cyklu ładowania strony i dlatego zwykle nie nadaje się do podłączania zdarzenia obsługi (dzieje się po załadowaniu wszystkich obrazów).

Zauważ, że musiałem włożyć trochę obsługi, aby poradzić sobie z różnicami w przeglądarkach. Prawdopodobnie będziesz potrzebować funkcji do podłączania zdarzeń, więc nie musisz za każdym razem powtarzać tej logiki. Lub rozważ użycie biblioteki, takiej jak jQuery , Prototype , YUI , Closure lub dowolnej z kilku innych, aby wygładzić te różnice między przeglądarkami. Jest to bardzo ważne , aby zrozumieć podstawowa rzeczy dzieje, zarówno pod względem podstaw JavaScript i fundamentów dom, ale biblioteki czynienia z dużo niespójności, a także dostarczają wiele narzędzi przydatnych - jak środek podpinania obsługi zdarzeń, która zajmuje się różnice w przeglądarkach. Większość z nich zapewnia również sposób konfigurowania funkcji (nppageInit) do uruchomienia, gdy tylko DOM będzie gotowy do manipulacji, na długo przed window loadpożarem.

TJ Crowder
źródło

Zmień to na type="button"lub umieść return false;w swojej funkcji JS

Paw

@Pav: Myślę, że pozostanę przy przesyłaniu, ponieważ jest to tylko ćwiczenie eksperymentalne. Będę robił kilka projektów wykorzystujących przesyłanie, więc lepiej się do tego przyzwyczaić ... W każdym razie dziękuję za pomysł.

Newbie Coder

@Newbie: Dodałem kilka dalszych uwag.

TJ Crowder

2

dlaczego nie po prostu zrobić elem.remove ();

Muhammad Umer,

1

@ Ghos3t - Na kilka sposobów: 1. Każda funkcja wywoływana z obsługi w stylu atrybutu musi być globalna, a globalna przestrzeń nazw jest już Really Crowded ™ i łatwo jest wybrać nazwę funkcji, która koliduje z czymś innym (to można rozwiązać, używając obiektu o prawdopodobnie unikalnej nazwie i umieszczając na nim wszystkie swoje programy obsługi). 2. Użycie starego sposobu w stylu atrybutu (lub przypisanie do onxyzwłaściwości elementu) zezwala tylko na pojedynczą procedurę obsługi, a jeśli przypisujesz do właściwości, zastępujesz to, co tam było, więc nie działa dobrze z innymi. (kont.)

TJ Crowder

34

Po prostu zrób to element.remove();

Wypróbuj tutaj PATRZ

http://jsfiddle.net/4WGRP/

Muhammad Umer
źródło

5

Ostrożnie z tym, ponieważ wydaje się to być całkiem nowym dodatkiem i nie ma pełnej obsługi przeglądarek, a mianowicie IE i FF w wersjach 22 i wcześniejszych ( red-team-design.com/… ).

dule

1

Osobiście

odczekałbym

2

Cóż, wydaje się, że teraz jest to dobrze obsługiwane: caniuse.com/#search=remove . Zgodziłbym się użyć go teraz. Jeśli absolutnie potrzebujesz obsługi IE11, przypuszczam, że można łatwo zbudować

polyfill

5

Pisanie kodu przyszłościowego jest lepsze niż programowanie z przeszłości. Oszczędź sobie czasu na konserwację i używaj.remove()

Gibolt

9

Należy użyć input type = "button" zamiast input type = "submit".

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

Zamówienie Mozilla Developer Center dla podstawowego html i javascript zasobów

CoderHawk
źródło

1

Zmieniłem twój link z W3Schools na Mozilla Developer Center. Spójrz na w3fools.com z mojego powodu ... Poza tym dobra odpowiedź :)

Alastair Pitts

2

@Alastair Pitts - jest ok. Chcę tylko wskazać PO do podstawowych samouczków html i js ..

CoderHawk

8

Twój JavaScript jest poprawny. Twój przycisk ma type="submit"przyczynę odświeżania strony.

Pav
źródło

5

Pojawia się ponownie, ponieważ przycisk przesyłania ponownie ładuje stronę. Najprostszym sposobem uniknięcia takiego zachowania jest dodanie a return falsedo onclickpodobnego:

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

mVChr
źródło

4

Zmień typ wejścia na „przycisk”. Jak powiedzieli TJ i Pav, formularz jest przesyłany. Twój Javascript wygląda poprawnie i pochwalam za wypróbowanie go w sposób inny niż JQuery :)

Newtang
źródło

Myślę, że pozostanę przy przesyłaniu, ponieważ jest to tylko eksperymentalne ćwiczenie dla moich przyszłych projektów, które używa przesyłania, więc lepiej się do tego przyzwyczaić ...

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-motyw
źródło

3

To jest właściwy kod. To, co prawdopodobnie się dzieje, to przesyłanie formularza i widzisz nową stronę (na której element będzie ponownie istniał).

Alex
źródło

3

Spróbuj uruchomić ten kod w swoim skrypcie .

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

I miejmy nadzieję, że usunie element / przycisk.

Sim Reaper
źródło

2

To działa. Po prostu usuń przycisk z „atrapy”, divjeśli chcesz go zatrzymać.

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>

Rozwiń fragment

Durtle02
źródło

1

Nadal jestem nowicjuszem, ale oto jeden prosty i łatwy sposób: Możesz użyć zewnętrznego HTML, który jest całym tagiem, a nie tylko częścią:

EX : <tag id='me'>blahblahblah</tag>'s innerHTML byłoby blahblahblah, a externalHTML byłoby wszystkim,<tag id='me'>blahblahblah</tag> .

Na przykład, jeśli chcesz usunąć tag, w zasadzie usuwa on jego dane, więc jeśli zmienisz zewnętrzny kod HTML na pusty ciąg, to tak, jakbyś go usunął.

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

Zamiast tego, jeśli chcesz go po prostu nie wyświetlać, możesz stylizować go w JS, używając właściwości widoczności, krycia i wyświetlania.

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

Zwróć na to uwagę opacity sprawia że element nadal jest wyświetlany, ale nie możesz go zobaczyć tak często. Możesz także zaznaczać tekst, kopiować, wklejać i robić wszystko, co normalnie, nawet jeśli jest to niewidoczne.

Visibility bardziej pasuje do Twojej sytuacji, ale pozostawi pustą przezroczystą przestrzeń o wielkości odpowiadającej elementowi, do którego został zastosowany.

Zalecałbym wyświetlanie, w zależności od tego, jak tworzysz swoją stronę. Wyświetl zasadniczo usuwając element z widoku, ale nadal możesz go zobaczyć w DevTools. Mam nadzieję że to pomoże!

HarryJamesPotter27
źródło

Jak usunąć element HTML za pomocą JavaScript?

Odpowiedzi: