Why is it difficult to delete elements from the DOM in VueJS?

Question

Why is it difficult to delete elements from the DOM in VueJS?

As a newcomer to VueJS, I find myself struggling with some basic tasks. One particular challenge I'm facing is trying to manipulate an SVG element on my webpage, such as deleting the children of a <g> element and replacing them with new ones. Despite numerous attempts, nothing seems to work and I am at a loss.

Let's take a look at a simplified version of the code...

HTML

<svg id="hz_svg" data-name="hz_svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 1000">
  <g class="scale" width ="1400" style="fill: none; stroke: white; stroke-width: 2px;"> 
    <line x1="100" y1="1000" x2="1500" y2="1000"  />
    <g class="ticks">
      <line x1="100" y1="1000" x2="100" y2="980"/>
      <line x1="800" y1="1000" x2="800" y2="980"/>
      <line x1="1500" y1="1000" x2="1500" y2="980"/>
    </g>
  </g>
</svg>

App.js

const ticksEl = document.querySelector("#hz_svg .ticks");

createApp({
  methods: {
    renderTicks() {
      ticksEl.replaceChildren();
      console.log('REMOVED!!!');
    },

The interesting part here is that even though console.log('REMOVED!!!') is executed, indicating that ticksEl.replaceChildren() ran successfully, the elements on the page remain unchanged. The svg <line>s within ticks are not removed. It's worth noting that this issue does not seem to be related to the JavaScript itself, as placing replaceChildren() outside of createApp works perfectly fine for removing the elements.

So, why am I unable to remove these elements? What could be causing this unexpected behavior?

Just to clarify, I prefer not to store the line elements within the VueJS data unnecessarily.

Note: Upon running console.log(ticksEl.children) after console.log('Removed!!!'), it shows no lines (children), even though they are still visible on the page.

javascript vue.js dom

Answer 1

Answer №1

If you're interested in achieving something similar to the example below, it's recommended to first learn more about Vue and other related frameworks:

new Vue({
  el: '#container',
  template: `<div>
<button v-on:click="removeShapes">Remove Shapes</button>
<label><input type="radio" name="fill" value="red" v-on:change="saveFill" :checked="currentFill === 'red'"> Red</label>
<label><input type="radio" name="fill" value="blue" v-on:change="saveFill" :checked="currentFill === 'blue'"> Blue</label>
<label><input type="radio" name="fill" value="green" v-on:change="saveFill" :checked="currentFill === 'green'"> Green</label>
<button v-on:click="addShape">Add Shape</button>
  <svg id="hz_svg" data-name="hz_svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 1000" width="1600" height="1600"  preserveAspectRatio="xMinYMin slice">
  <template v-for="shape of this.shapesHTML">
    <g v-html="shape" />
  </template>
</svg>
</div>`,
  data: {
    shapes: [
      { type: 'circle', cx: 30, cy: 50, r: 30, fill: 'red' },
      { type: 'circle', cx: 70, cy: 50, r: 30, fill: 'green' },
      { type: 'circle', cx: 110, cy: 50, r: 30, fill: 'blue' },
    ],
    currentFill: 'red',
  },
  computed: {
    shapesHTML() {
      return this.shapes.map((shape) => {
        let attributes = (({ type, ...attributes }) => attributes)(shape)
        let htmlAttributes = Object.entries(attributes).map(([key, attribute]) => `${key}="${attribute}"`)
        return `<${shape.type} ${htmlAttributes.join(' ')} />`
      })
    }
  },
  methods: {
    removeShapes() {
      this.shapes = []
    },
    addShape() {
      this.shapes = [ ...this.shapes, {
        type: 'circle',
        cy: 50,
        cx: 20 + ((this.shapes.length + 1) * 30),
        r: 30,
        fill: this.currentFill,
      } ]
    },
    saveFill(e) {
      this.currentFill = e.target.value
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="container"></div>

Answer 2

If you're interested in achieving something similar to the example below, it's recommended to first learn more about Vue and other related frameworks:

new Vue({
  el: '#container',
  template: `<div>
<button v-on:click="removeShapes">Remove Shapes</button>
<label><input type="radio" name="fill" value="red" v-on:change="saveFill" :checked="currentFill === 'red'"> Red</label>
<label><input type="radio" name="fill" value="blue" v-on:change="saveFill" :checked="currentFill === 'blue'"> Blue</label>
<label><input type="radio" name="fill" value="green" v-on:change="saveFill" :checked="currentFill === 'green'"> Green</label>
<button v-on:click="addShape">Add Shape</button>
  <svg id="hz_svg" data-name="hz_svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 1000" width="1600" height="1600"  preserveAspectRatio="xMinYMin slice">
  <template v-for="shape of this.shapesHTML">
    <g v-html="shape" />
  </template>
</svg>
</div>`,
  data: {
    shapes: [
      { type: 'circle', cx: 30, cy: 50, r: 30, fill: 'red' },
      { type: 'circle', cx: 70, cy: 50, r: 30, fill: 'green' },
      { type: 'circle', cx: 110, cy: 50, r: 30, fill: 'blue' },
    ],
    currentFill: 'red',
  },
  computed: {
    shapesHTML() {
      return this.shapes.map((shape) => {
        let attributes = (({ type, ...attributes }) => attributes)(shape)
        let htmlAttributes = Object.entries(attributes).map(([key, attribute]) => `${key}="${attribute}"`)
        return `<${shape.type} ${htmlAttributes.join(' ')} />`
      })
    }
  },
  methods: {
    removeShapes() {
      this.shapes = []
    },
    addShape() {
      this.shapes = [ ...this.shapes, {
        type: 'circle',
        cy: 50,
        cx: 20 + ((this.shapes.length + 1) * 30),
        r: 30,
        fill: this.currentFill,
      } ]
    },
    saveFill(e) {
      this.currentFill = e.target.value
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="container"></div>

Why is it difficult to delete elements from the DOM in VueJS?

Answer №1

Similar questions

The TextInput field is not displaying my placeholder text - what could be causing this issue?

What is the best way to retrieve the chosen option when clicking or changing using jQuery?

Is it feasible to convert a Google Drive spreadsheet into JSON format without needing the consent screen?

Fixed Positioning Div to Stay at the Top while Scrolling

Tips for importing a PDF file and storing it in your database

Experiencing an excessive number of requests while managing the display of a spinner through axios interceptors

Receiving an unknown value from the input field

Implementing Dynamic FormControl Values within FormGroup in Angular: A Step-by-Step Guide

What is the best way to incorporate several functions within a resize function?

Automatically populate the article number field once the article name has been entered

Setting up an i18n project in AngularJS

Struggling to access the height attribute from a CSS file

When working in three.js, it's important to remember that geometry.faceVertexUvs[0][0][index] does not equate to geometry.vertices

Are there any issues with the function that is preventing me from creating a user in mongodb?

Displaying subsets of data based on the identifier of the primary array

Bootstrap and jQuery for creating columns of equal height

Transfer the scroll top value from a textarea to a div element

Button react-native press following textInput within scroll view aware of keyboard movements

How can you make nested JSON values optional in Joi Validation?

What could be causing this highchart plot to fail to display in both IE and Chrome?