Remove Element by Id

Remove element by id

Update 2011

This was added to the DOM spec back in 2011, so you can just use:

element.remove()

The DOM is organized in a tree of nodes, where each node has a value, along with a list of references to its child nodes. So element.parentNode.removeChild(element) mimics exactly what is happening internally: First you go the parent node, then remove the reference to the child node.

As of DOM4, a helper function is provided to do the same thing: element.remove(). This works in 96% of browsers (as of 2020), but not IE 11.

If you need to support older browsers, you can:

• Remove elements via the parent node
• Modify the native DOM functions, as in Johan Dettmar's answer, or
• Use a DOM4 polyfill.

How to remove element by ID using Javascript?

Change "file-' + fileId + '" with \'file-' + fileId + '\'.

You're setting a string in html var using '' chars, so you can use freely "" in it: var html = '<a href="myhref">'

But when you need to also declare a string inside an already opened double quote, you need to use single quote and escape it so JS knows you're not actually closing the initial single quote at the beginning.
var html = '<a href="myhref" onclick="functionToCall(\'myStringInsideAnotherString\')">'

And you can still add dynamic thing using regular (not escaped) single quotes:
var html = '<a href="myhref" onclick="functionToCall(\'myStringInside' +
myOtherStringDeclaredSomewhereElse + 'AnotherString\')">'

Also, in order to make your fiddle to work, you'll need to change the load type to "No wrap" instead of onLoad.

jQuery: remove element by id

$('#toremove').remove(); should do what you need. Are you sure there isn't a problem elsewhere in your code?

Example

Remove element by ID in looping using onclick - jquery

I think your data is dynamically added. Then don't use IDs because IDs should be unique

You should use class names on remove anchors. Then remove elements using prev() or next() function

$(document).ready(function(){

$('.remove').click(function(){

    $(this).prev().remove(); //Remove input

    $(this).prev().remove(); // Remove checkbox

    $(this).remove(); // Remove this

});

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="checkbox" class ="checkbox" name="correct[<?php echo $ans->answerid; ?>][correct]" id="correct[<?php echo $ans->answerid; ?>][correct]" value="<?php echo $ans->correct; ?>" checked/>

<input type="text" name="answer"  id="answer" class="" value="answer">

<a class="md-btn-danger remove" >Remove</a><br>

<input type="checkbox" class ="checkbox" name="correct[<?php echo $ans->answerid; ?>][correct]" id="correct[<?php echo $ans->answerid; ?>][correct]" value="<?php echo $ans->correct; ?>" checked/>

<input type="text" name="answer[<?php echo $ans->answerid; ?>][answer]"  id="answer" class="" value="<?php echo $ans->answer; ?>">

<a class="md-btn-danger remove" >Remove</a>

Remove dynamically created element by id in angular component

You can add a #local reference" to a ng-container or a div that contains your element, and then in your code, with @ViewChild link the reference, and finally delete it with:

@ViewChild('yourLocalReferenceHTMLname') private yourLocalReferenceHTMLname: ElementRef;

this.yourLocalReferenceHTMLname.nativeElement.remove();

Anyway, try not to use elementRef [From the Angular Documents]:

Use elementRef API as the last resort when direct access to DOM is needed. Use templating and data-binding provided by Angular instead.
Alternatively, you can use Renderer2, which provides API that can safely be used even when direct access to native elements is not supported.

Relying on direct DOM access creates tight coupling between your application and rendering layers which will make it impossible to separate the two and deploy your application into a web worker.

Literally, from this render2 article HERE:

Why not ElementRef?

We can use the nativeElement property of the ElelemtRef to manipulate the DOM.The nativeElement Property contains the reference to the underlying DOM object. This gives us direct access to the DOM, bypassing the Angular.

There is nothing wrong with using it, but it is not advisable for the following reasons:

Angular keeps the Component & the view in Sync using Templates, data binding & change detection, etc. All of them are bypassed when we update the DOM Directly.

DOM Manipulation works only in Browser. You will not able to use the App in other platforms like in a web worker, in Server (Server-side rendering), or in a Desktop, or in the mobile app, etc where there is no browser.

The DOM APIs do not sanitize the data. Hence it is possible to inject a script, thereby, opening our app an easy target for the XSS injection attack.

---

Related Topics