Mit Javascript html tag löschen?

Beispiel:

ich bin auf irgendeiner seite

und mir passt irgendein div nicht.

macht zwar keinen sinn aber egal.

der div hat die id=„test“.

wie kann ich jz dafür sorgen mit javascript das der div verschwindet ?

könnte zwar den text der da drinne steht löschen aber dann wäre der Div noch innerhalb vom Body.

Oder auch die farbe transparent machen mit css dann würde man ihn nichtmehr sehen.

RemoveChild hat bei mir nicht funktioniert, wahrscheinlich hab ich das falsch geschrieben/ was falsches gegoogelt

2 Antworten

Vom Fragesteller als hilfreich ausgezeichnet

MrAmazing2

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

HTML, JavaScript

30.04.2022, 01:32

Du kannst das Div im Inspektor anklicken und die Entfernen-Taste drücken.

Aber per JS ginge es so:

document.querySelector("#test").remove()

Woher ich das weiß:Hobby – Programmieren ist mein Hobby & Beruf

Hedhhdgtf

Fragesteller

30.04.2022, 02:01

Danke, wollte es nicht nur manipulieren mit den chrome tools sondern mit einer Chrome extension dauerhaft löschen. ich werds mal versuchen ob das klappt

MrAmazing2

30.04.2022, 03:32

@Hedhhdgtf

Dachte ich mir schon, deshalb hab ich auch geschrieben wie man es mit JS macht :D

Gutes Gelingen!

medmonk

30.04.2022, 02:10

Wenn das Element eine ID hat, würde ich dieses einfach mithilfe einer Custom-CSS über display: none verstecken. Das hätte auch den Vorteil, dass das Element auch bei deaktiviertem JavaScript nicht angezeigt wird.

CSS:

#test {
  display: none;
}

Wenn es mit JavaScript umgesetzt werden soll, wäre remove() oder outerHTML die Methode dafür. Letzteres, falls das ganze - warum auch immer - auch in älteren Browsern wie dem IE funktionieren soll.

JavaScript:

document.querySelector("#test").remove();
// IE fallback
document.getElementById("test").outerHTML="";

Über CSS verschwindet das Element nur visuell, steht aber weiterhin im DOM. Du müsstest also dafür sorgen, dass unerwünschte Elemente auch nach einem erneuten Seitenaufruf (Ladevorgang) entfernt oder ausgeblendet werden.

MrAmazing2

30.04.2022, 03:33

Scheiß auf Internet Explorer Fallback lol. Den sollte man nicht mehr supporten

medmonk

30.04.2022, 03:46

@MrAmazing2

Ich habe es lediglich der Vollständigkeit halber erwähnt.

Ähnliche Fragen

CSS den Text über blur effekt?

Also der body soll verschwommen sein aber nicht der div

(oder nur der div Text).

Hab es schon mit z-index versucht

 <style>
        body{
            filter: blur(5px);
            position: relative;
            z-index: -10;
        }
        div{
            font-size: xx-large;
            filter: blur(0px);
            position: relative;
            z-index: 10;
        }
    </style>
</head>
<body>
    <div>
        Hallo
    </div>
</body>

...zur Frage

CSS bei Hover anderes Element verändern?

Ganz ohne JavaScript

Mit dem Code unten kann ich beim hovern auf container1 die Hintergrundfarbe von container2 ändern weil er in container1 drinnen ist

aber geht es nicht auch so das ich den Body Hintergrund auf grün oder so ändern kann ?

    #container1{
            height: 50vh;
            background-color: blue;
        }
        #container2{
            height: 25vh;
            width: 100%;
            background-color: red;
        }
        #container1:hover #container2{
            background-color: green;
        }
    <div id="container1">
            <div id="container2"></div>
    </div>

...zur Frage

HTML - div verschwinden lassen nach Zeit?

Hallo,

ich habe eine einfache Webanwendung mit HTML, CSS und JavaScript programmiert. Mit CSS habe ich eine einfache Lade-Animation erstellt.

Diese Animation ist in einem .div -Container gespeichert.

Diese Animation soll nach 5 Sekunden automatisch verschwinden, da der Content meiner Webanwendung bis dahin richtig geladen hat und sonst der Bildschirm mit den verschiedenen Elementen überflutet wäre...

Durch Google bin ich leider nicht schlauer geworden.

Kann mir jemand den Code als Antwort auf diese Frage geben oder einen Link zum Code geben?

Danke im Voraus!

...zur Frage

HTML|JS|CSS - Hinter dem DIV den Hintergrund unschärfen?

Hallo,

ich möchte gerne die restliche Seite unscharf haben, wenn mein DIV-Formular offen ist. Wenn ich mein DIV aber schließe "Abbrechen", ist die ganze Seite weg. Ich vermute mal das es mit dem anzeigen und verstecken vom "overlay" DIV zusammenhängt, welcher auch die Unschärfe rein bringt.

HTML Part:

<html>
<header>
    <link rel="stylesheet" href="css/style.css">
    <script language="javascript" type="text/javascript" src="js/script.js"></script>
    <script type="text/javashttps://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.jsquery.min.js"></script>
</header>

<div class="bsr"> <b> Besprechungsraum: </b> RR </div> <br>

<div id="ajaxdiv"> </div>

<div align="center" id="reservierungdiv"> <a href="#" class="btn_reservierung" onclick="openForm()">Reservierung</a> </div>

<?php include "connect/users.php"; ?>

</div> </body> </html>

CSS Part:

body {
    background-color: whitesmoke;
    /overflow: hidden;/
    z-index: 0;
}

#overlay{
    /display: none;/
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: .5;
    z-index: 3;
    filter: blur(2px);
    visibility: hidden;
}

JS Part:

function openForm() {
    document.getElementById("myForm").style.display = "block";
    document.getElementById("overlay").style.display = "block"; <---
    startTimer();
}

function hideDiv() {
    document.getElementById('myForm2').reset();
    //$("#client")[0].reset();
    document.getElementById('myForm').style.display = 'none';
    document.getElementById("overlay").style.display = "none"; <---
}

...zur Frage

css Rand entfernen

hey leute, ich beschäftige mich seit kurzem mit dem designen von webseiten und habe immer das problem dass ich wenn ich meine ganze seite mit css formatieren will so wie hier:

<body>
<div id="default">
<h1>Inhalt</h1>
</div>
</body>

dann bleibt immer ein weißer rand oben, unten, rechts und links von meinen in css definiertten hintergrundbild

bitte nicht die methode mit 'margin' vorschlagen die funktoniert nicht...

danke für hilfreiche antworten ;)

...zur Frage

Blur mit Javascript entfernen?

Ich habe ein div Element mit CSS "geblurt". Jetzt würde ich den Blur Effekt gerne mittels Javascript mit einem Klick entfernen, sodass man den Text wieder einwandfrei lesen kann. Wie Stelle ich das an?

...zur Frage

HTML / CSS: div wird nicht angezeigt?

Ich fange gerade erst an und mein HTML-Code für div ist:

<body bgcolor="#333333">
  <div id="top"> </div>
</body>

und im CSS:

#top {
  background-color:aqua;
  width: 100%;
  height: 100px;
}

Aber wenn ich das im Browser angucken will, dann wird mir nichts angezeigt. Alles ist gespeichert und ich benutze Brackets. Davor hab ich es mit Atom ausprobiert, aber da funktioniert es auch nicht.

...zur Frage

HTML <div> und <main>?

hey leute ich würd mich jetzt nichtmehr als totaler anfänger bezeichnen was das schreiben von webseiten mit html und css angeht aber ich verstehe nicht ganz wann man <div> benutzten soll. außerdem habe ich mal was im <body>-bereich von einem <main> gehört wo anscheinend alles grundlegende von der seite reinkommt aber keiner nutzt das ist das echt so relevant?

...zur Frage

Wie kann ich eine HTML und JavaScript Login-Funktion mit nur einer Passwortmöglichkeit machen?

Ich will eine Login-Funktion für eine eigene Internetseite machen, wobei nur mein eigenes Passwort funktionieren soll. Es kommt aber immer die Meldung, dass das Passwort falsch sei.

Das ist mein Code:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css" type="text/css">
    <title>Seitenname | Login</title>
    <meta charset ="utf-8">
  </head>
  <body>
    <div id="wrapper">
      <header><img src="bilder/Logo.jpg" alt="Logo"></header>
      <sectionAnmeldung>
        <div class="Anmelden">
          <h1>Anmelden</h1>
          <a>Passwort:</a>
          <input type="password" name="myPw" placeholder="Password" />
          <script>
            function pwRichtig() {
              var x = document.getElementsByName("myPw").value;
              var pw = "password123";

              if (x == pw) {
                document.open("hauptseite.html");
              }
              else {
                alert("Falsches Passwort!");
              }
            }
          </script>
          <input type="submit" name="" value="Einloggen" onclick="pwRichtig()" required />
        </div>
      </sectionAnmeldung>
    </div>
  </body>
</html>

...zur Frage

Website dauerhaft mit Javascript bearbeiten?

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div>
      <input placeholder="Irgendwas eingeben" id="password">
    </div>
    <button onclick="password()"> Press Me</button>
    <script>
      
      function password() {
        let password = document.getElementById('password').value;
        let element = document.createElement('div');
        element.innerText = password;
        document.body.appendChild(element);
      }
    </script>
  </body>
</html>

Hi wenn ich nun die Website neu Lade dann bleiben die Divs nicht bestehen,

kann mir jemand sagen wie ich die Divs dauerhaft auch für andere clients sichtbar

behalten kann.?

...zur Frage

JavaScript - Erste Schritte, CSS wird blockiert?

Ich bekomme folgenden Error, wenn ich versuche meine ersten Versuche einer Webseite in Firefox zu laden.

Die Ressource von "http://localhost:63342/FirstTest/style.css" wurde wegen eines MIME-Typ-Konfliktes ("text/html") blockiert (X-Content-Type-Options: nosniff)

Das ist der Code von den Datein.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Title</title>
    <link rel="stylesheet"href="style.css">
</head>
<body>
    <div class="placeholder">
        I'm in a div!
    </div>
    <div class="anotherClass">
        I'm in another class!
    </div>
</body>
</html>

CSS

.placeholder{
    background-color: red;
}

.anotherClass{
    background-color: lightseagreen;
}

Leider werden nur die div Elemente ausgeben, woran kann es legen? Ich werde aus der Fehlermeldung nicht schlau.

Schöne Grüße

...zur Frage

javascript -webkit-scrollbar check in welchem div man ist?

Hey,

Ich versuche eine Website wie Tiktok zu programmieren und habe jetzt programmiert, dass man runterscrollen kann und dann ein neues Video kommt.
Das habe ich 100% nur mit HTML und CSS gemacht, aber jetzt will ich in Javascript ein Check einführen, welches Video man gerade anschaut.

dashboard.php:

player.css:

Kann mir wer helfen?

...zur Frage

Wie kann ich den Fehler bei meiner To-Do-Liste (mit HTML und JavaScript) beheben?

Mein Ziel ist es, eine To-Do-Liste mit HTML, CSS und Javascript zu erstellen. Eine Person gibt ihr To-Do ein und kann es mit ENTER oder mit dem "Bestätigen"-Button hinzufügen. Gleichzeitig wird auch die Leiste, wo man dies eingibt, wieder geleert.

Wenn man nun dort etwas eingibt und bestätigt, wird die Eingabeleiste geleert, aber das To-Do fügt sich nicht hinzu. Oder besser gesagt: Es erscheint nur für ein paar Millisekunden.

Wie kann ich den Fehler beheben (ich bin Anfänger)?

Hier der Code von der index.html-Datei:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ToDo Liste</title>
    <style>
      #input {
        margin: 50px;
        text-align: center;
      }
    </style>
    <script>
      function addTodo() {
        todolist.innerHTML += `${todofield.value}`;
        todofield.value= '';
      }
    </script>
  </head>
  <body>
    <form onsubmit="addTodo()">
      <div id="input">
        <input type="text" id="todofield">
        <button type="submit" for="todofield">Bestätigen</button>
      </div>
    </form>
    <div id="todolist"></div>
  </body>
</html>

Danke für eure Hilfe.

...zur Frage

Scrolling Effekt nur mit CSS, ohne JavaScript?

Wie bekomme ich diesen Parallax Scrolling Effekt

https://www.youtube.com/watch?v=TawH-AqHTXc

Meine Umsetzung: https://codepen.io/MrAmazing2/pen/dyMByNr

mit purem CSS hin??

Denn die JavaScript Version ist oft sehr ruckelig, da JS Asynchron läuft. Mit purem CSS wäre es aber immer flüssig. (Quelle)

Ich bin bereits auf das hier gestoßen: https://keithclark.co.uk/articles/pure-css-parallax-websites/demo3/

Jedoch schaffe ich es nicht, das ganze in ein Div zu packen, und darunter weitere Divs/Sections zu plazieren, sodass es aussieht wie in meiner Demo. Stattdessen überlappt es sich, oder der Parallax-Part bekommt eine extra Scrollbar.

Sitze nun schon seit 15 Stunden daran und schaffe es einfach nicht. Bin aber auch CSS Neuling.

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen