Comment supprimer un élément HTML en utilisant Javascript?

124

Je suis un novice total. Quelqu'un peut-il me dire comment supprimer un élément HTML en utilisant le Javascript d'origine et non 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);
}

Ce qui se passe lorsque je clique sur le bouton Soumettre, c'est qu'il disparaîtra pendant très très peu de temps, puis réapparaîtra immédiatement. Je souhaite supprimer complètement l'élément lorsque je clique sur le bouton.

javascript html Codeur débutant
la source

Que faire si je clique dessus, détecte une erreur et appuie sur stop ?

alex

Désolé, c'est un sujet mais c'est vraiment très drôle, qu'il se soit nommé "Newbie Coder" et maintenant le profil a une réputation d'environ 9000. Demander quelque chose dans le "bon vieux temps" est vraiment rentable de nos jours. :)

Rene le

189

Ce qui se passe, c'est que le formulaire est soumis et que la page est en cours d'actualisation (avec son contenu d'origine). Vous gérez leclick événement sur un bouton d'envoi.

Si vous souhaitez supprimer l'élément et ne pas soumettre le formulaire, gérez submitplutôt l' événement sur le formulaire et renvoyez-le falsedepuis votre gestionnaire:

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

Mais vous n'avez pas du tout besoin (ou ne voulez) pas d'un formulaire pour cela, pas si son seul but est de supprimer le div factice. Au lieu:

HTML:

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

JavaScript:

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

Cependant , ce style de configuration des gestionnaires d'événements est démodé. Vous semblez avoir un bon instinct dans la mesure où votre code JavaScript est dans son propre fichier et autres. L'étape suivante consiste à aller plus loin et à éviter d'utiliser des onXYZattributs pour connecter des gestionnaires d'événements. Au lieu de cela, dans votre JavaScript, vous pouvez les connecter avec la méthode la plus récente (vers l'an 2000) à la place:

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

... puis appelez à pageInit();partir d'une scriptbalise à la toute fin de votre page body(juste avant la </body>balise de fermeture ), ou à partir de l' window loadévénement, bien que cela se produise très tard dans le cycle de chargement de la page et ne soit donc généralement pas bon pour connecter l'événement handlers (cela se produit après que toutes les images ont finalement été chargées, par exemple).

Notez que j'ai dû faire quelques manipulations pour gérer les différences de navigateur. Vous voudrez probablement une fonction pour connecter des événements afin de ne pas avoir à répéter cette logique à chaque fois. Ou pensez à utiliser une bibliothèque telle que jQuery , Prototype , YUI , Closure ou l' une des autres pour atténuer ces différences de navigateur pour vous. Il est très important de comprendre ce qui se passe sous-jacent, à la fois en termes de principes fondamentaux de JavaScript et de fondamentaux DOM, mais les bibliothèques traitent de nombreuses incohérences et fournissent également de nombreux utilitaires pratiques - comme un moyen de connecter des gestionnaires d'événements qui traitent de différences de navigateur. La plupart d'entre eux fournissent également un moyen de configurer une fonction (commepageInit) à exécuter dès que le DOM est prêt à être manipulé, bien avant les window loadincendies.

TJ Crowder
la source

Changez-le type="button"ou mettez-le return false;dans votre fonction JS

Pav

@Pav: Je pense que je vais m'en tenir à soumettre parce que ce n'est qu'un exercice expérimental. Je vais faire des projets qui utilisent submit donc je ferais mieux de m'y habituer ... Merci quand même pour l'idée.

Newbie Coder

@Newbie: J'ai ajouté quelques notes supplémentaires.

TJ Crowder

2

pourquoi ne pas simplement faire elem.remove ();

Muhammad Umer

1

@ Ghos3t - Deux méthodes: 1. Toute fonction que vous appelez à partir d'un gestionnaire de style attribut doit être un global, et l'espace de noms global est déjà Really Crowded ™ et il est facile de choisir un nom de fonction qui entre en conflit avec autre chose (ceci peut être adressé en utilisant un objet avec un nom probablement unique et en y mettant tous vos gestionnaires). 2. Utiliser l'ancien style d'attribut (ou attribuer à la onxyzpropriété sur l'élément) n'autorise qu'un seul gestionnaire, et si vous affectez à la propriété, vous remplacez ce qui s'y trouvait auparavant, de sorte qu'il ne joue pas bien avec les autres. (suite)

TJ Crowder

34

Fais juste ça element.remove();

Essayez-le ici LOOK

http://jsfiddle.net/4WGRP/

Muhammad Umer
la source

5

Attention, car cela semble être un ajout assez récent et ne prend pas en charge le navigateur complet, à savoir les versions IE et FF 22 et antérieures ( red-team-design.com / ... ).

dule

1

J'attendrais personnellement encore 5 ans pour l'utiliser

slebetman

2

Eh bien, cela semble être pris en charge par défaut maintenant: caniuse.com/#search=remove . J'accepterais de l'utiliser maintenant. Si vous avez absolument besoin de prendre en charge IE11, je suppose qu'un polyfill pourrait facilement être construit ...

jehon

5

Il vaut mieux écrire un code à l'épreuve du temps que programmer pour le passé. Épargnez-vous le temps de maintenance et utilisez.remove()

Gibolt

9

Vous devez utiliser input type = "button" au lieu de input type = "submit".

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

Consultez le Centre de développement Mozilla pour les ressources HTML et JavaScript de base

CoderHawk
la source

1

J'ai changé votre lien de W3Schools vers le Mozilla Developer Center. Jetez un œil à w3fools.com pour mon raisonnement ... A part ça, bonne réponse :)

Alastair Pitts

2

@Alastair Pitts - c'est ok. Je veux juste pointer PO vers les didacticiels de base html et js ..

CoderHawk

8

Votre JavaScript est correct. Votre bouton type="submit"provoque l'actualisation de la page.

Pav
la source

5

Il réapparaît car votre bouton d'envoi recharge la page. La façon la plus simple pour éviter ce comportement est d'ajouter un return falseà la onclickfaçon:

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

mVChr
la source

4

Changez le type d'entrée en "bouton". Comme l'ont dit TJ et Pav, le formulaire est en train d'être soumis. Votre Javascript semble correct, et je vous félicite de l'avoir essayé de manière non-JQuery :)

Newtang
la source

Je pense que je vais m'en tenir à soumettre car il ne s'agit que d'un exercice expérimental pour mes futurs projets qui utilise submit donc je ferais mieux de m'y habituer ...

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

3

C'est le bon code. Ce qui se passe probablement, c'est que votre formulaire est en cours d'envoi et que vous voyez la nouvelle page (où l'élément existera à nouveau).

Alex
la source

3

Essayez d'exécuter ce code dans votre script .

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

Et cela supprimera, espérons-le, l'élément / bouton.

Sim Reaper
la source

2

Cela marche. Retirez simplement le bouton du «mannequin» divsi vous souhaitez conserver le bouton.

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>

Développer l'extrait

Durtle02
la source

1

Je suis encore un débutant aussi, mais voici un moyen simple et facile: vous pouvez utiliser externalHTML, qui est la balise entière, pas seulement une partie:

EX: <tag id='me'>blahblahblah</tag>de » innerHTML serait blahblahblah, et outerHTML serait la chose, <tag id='me'>blahblahblah</tag>.

Donc, pour l'exemple, si vous voulez supprimer la balise, c'est essentiellement la suppression de ses données, donc si vous changez le externalHTML en une chaîne vide, c'est comme la supprimer.

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

Au lieu de cela, si vous souhaitez simplement ne pas l'afficher, vous pouvez le styliser dans JS en utilisant les propriétés de visibilité, d'opacité et d'affichage.

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

Notez que opacity l'élément s'affiche toujours, mais vous ne pouvez pas le voir autant. En outre, vous pouvez sélectionner du texte, copier, coller et faire tout ce que vous pouvez faire normalement, même s'il est invisible.

Visibility s'adapte davantage à votre situation, mais il laissera un espace transparent vide aussi grand que l'élément auquel il a été appliqué.

Je vous recommanderais d'afficher, en fonction de la façon dont vous créez votre page Web. Display supprimant essentiellement l'élément de votre vue, mais vous pouvez toujours le voir dans DevTools. J'espère que cela t'aides!

HarryJamesPotter27
la source

Comment supprimer un élément HTML en utilisant Javascript?

Réponses: