Radera element

Vi kan även radera html-element i JavaScript.

Om du vill koda med kan du hämta sandboxen.

I JavaScript finns en inbyggd metod remove():

js

const myContent = document.getElementById('content')

myContent.innerHTML = '<h3>This is a template!</h3>'

myContent.remove() // Tar bort hela elementet

console.log('Sandbox is ready!')

Ett annat sätt är att använda parent/child förhållandet mellan elementen och metoden removeChild. Vi lägger till en låda i content:

html

<div id="content" class="content">
  <div class="box"></div>
</div>

css

.box {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  display: inline-block;
  margin: 2px;
}

Från javascript kan vi nu hämta både “föräldern” och “barnet” för att sedan ta bort elementet:

js

const myContent = document.getElementById('content')
const box = document.getElementsByClassName('box')[0]

myContent.removeChild(box) // Tar bort elementet

Man kan även ta andra “vägar” genom till exempel parentNode:

js

const box = document.getElementsByClassName('box')[0]
box.parentNode.removeChild(box) // Tar bort child-elementet

Återigen, det finns många fler sätt att hantera elementen, även att radera dem. Det enklaste är dock element.remove().

Läs mer om remove.