Remove tag with Jquery

Issue

I have two tags. I just want to remove the second one with Jquery, not sure how to do that.

<canvas id="compoundingChart" height="480" width="1204" style="display: block; height: 240px; width: 602px;" class="chartjs-render-monitor"></canvas>

<canvas id="compoundingChart" height="120"></canvas>

I have however seen this code

$(function() {
    $("#segement1,#segement2,#segement3").hide()
});

But tried doing this and it didnt work

$(function() {
    $("<canvas id="compoundingChart" height="120"></canvas>").hide()
});

Solution

What you have is a syntax error. This error is surely being reported on your browser's development console. Always check there first.

Even after correcting the syntax... This creates an element, sets it to be hidden, and then does nothing with it (not even add it to the page):

$('<canvas id="compoundingChart" height="120"></canvas>').hide()

Contrast that with the code you've "seen", which selects elements by their id and hides them:

$("#segement1,#segement2,#segement3").hide()

If you're going to use jQuery to select elements, you'd do well to familiarize yourself with jQuery selectors (most of which is essentially identical to CSS selectors).

You can select your element by its id, but first you need to correct your HTML to not re-use id values. For example:

<canvas id="compoundingChart" height="480" width="1204" style="display: block; height: 240px; width: 602px;" class="chartjs-render-monitor"></canvas>

<canvas id="compoundingChart2" height="120"></canvas>

Now that id values are distinct, you can use your jQuery selector to target the id of the element you want:

$("#compoundingChart2").hide()

---

Edit: If you can't modify the HTML then you can also use this:

$('canvas[height="120"]').hide();

There are many, many ways to select elements in the document, you are encouraged to research and learn more. In this case you'd be selecting by the tag name (canvas) and a specific attribute value (height="120").

Note also of course that if you can't correct the HTML then you still have invalid HTML, so any behavior of the HTML/CSS/JS is potentially undefined and browser-specific.

Answered By - David