To do list

javascript — remove element

My question is rather elementary, but I do not understand why, in the following code, on button click only button dissapears, instead of the whole div:

  
Your Offline Web Dictionary!
  
 
 Dictionary Search 
 
 

3 Answers 3

The problem is that the button element has a remove property so that is called instead of your remove function. And also the string thing.

Why would the button’s remove get called? Is there some implicit with in action? And where is this remove coming from? It’s not a specified DOM method.

Yet another example of why using DOM0 handlers is a Bad Idea(tm). (And the implicit with on the element in the onclick generated function is coming back to me. )

Two problems. Firstly, intro should be a string, not an identifier, so use remove(‘intro’) in your onclick.

Second, document.rwmoveChild is incorrect. removeChild should be called on the parent of the element you are removing. It is common to use:

element.parentNode.removeChild(element); 

All quite correct, but it doesn’t answer the question the OP asked: Why is the button, not the div, disappearing?

intro should be sent to the function as a string rather than a variable, i.e, ‘intro’

Also, you must rename your function, for example, removeById instead of remove . Then it works perfectly.

The function remove actually does something completely different. (Your function is not even invoked when it is named remove as you can see by putting an alert message into it.)

Источник

Element: remove() method

The Element.remove() method removes the element from the DOM.

Syntax

Parameters

Return value

Examples

Using remove()

div id="div-01">Here is div-01div> div id="div-02">Here is div-02div> div id="div-03">Here is div-03div> 

const element = document.getElementById("div-02"); element.remove(); // Removes the div with the 'div-02' id 

Element.remove() is unscopable

The remove() method is not scoped into the with statement. See Symbol.unscopables for more information.

with (node)  remove(); > // ReferenceError: remove is not defined 

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Apr 7, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

How to remove element «this» from list in jquery?

You can do this easily by just calling the deleteItem onclick(this) function and add this to it.

You can use the jQuery function .remove() and .parent() to remove the actual li you clicked on

You can either use this onclick or _this as an args on the deleteItem function. Both will work fine.

You can read more about .remove here and .parent() here

Run snippet below to see it in action.

       
Write your tasks here
 

Using .closest

You can also do this using .closest

       
Write your tasks here
 

Basically, every event handler function receives an Event object as it’s parameter when called. More info on this can be found at at a resource like MDN: https://developer.mozilla.org/en-US/docs/Web/API/Event

The event has a property, «target», who’s value is the DOM element that got clicked. We can wrap this with jquery so that we can use jquery functions on it.

if you’d rather rely on the this keyword like you did with the «complete» function.

Источник

Remove an element from the DOM from reference to element only

. but it feels messy. Is there a tidier — and universally supported — way to do the same thing? It’s seems — to me at least — like there should be something like this:

document.getElementById('some_element').remove(); 

. but that doesn’t work, and searching Google/SO has not yielded any alternative. I know it doesn’t matter that much, but parentNode.removeChild() just feels hacky/messy/inefficient/bad practice-y.

3 Answers 3

It can seem a bit messy, but that is the standard way of removing an element from its parent. The DOM element itself can exist on its own, without a parentNode , so it makes sense that the removeChild method is on the parent.

IMO a generic .remove() method on the DOM node itself might be misleading, after all, we’re not removing the element from existence, just from its parent.

You can always create your own wrappers for this functionality though. E.g.

function removeElement(element) < element && element.parentNode && element.parentNode.removeChild(element); >// Usage: removeElement( document.getElementById('some_element') ); 

Or, use a DOM library like jQuery which provides a bunch of wrappers for you, e.g. in jQuery:

This edit is in response to your comment, in which you inquired about the possibility to extend native DOM implementation. This is considered a bad practice, so what we do instead, is create our own wrappers to contain the elements and then we create whatever methods we want. E.g.

function CoolElement(element) < this.element = element; >CoolElement.prototype = < redify: function() < this.element.style.color = 'red'; >, remove: function() < if (this.element.parentNode) < this.element.parentNode.removeChild(this.element); >> >; // Usage: var myElement = new CoolElement( document.getElementById('some_element') ); myElement.redify(); myElement.remove(); 

This is, in essence, what jQuery does, although it’s a little more advanced because it wraps collections of DOM nodes instead of just an individual element like above.

Источник

Remove self element onclick

I have an element that is added using javascript to my HTML document. I am trying to remove it when I click on that same element. I do not know the id of the element yet, I have just included a sample id for now. I have already tried looking at this answer here (Creating an element that can remove it self?) and tried using the method provided here (Javascript: How to make a Control send itself in a method) as well to reference the element but have had no luck. Here is what I have so far.

You are getting this.id and trying to remove that. It would be this.remove() , which won’t work in IE, if you care. Also, you should learn to separate your JavaScript from your HTML.

9 Answers 9

You have to pass this through the function call in html onclick so it could refer to the element then you have to use it as parameter in the function definition, otherwise, if you use this in the function definition, it will just refer to the window object.

your remove function should be like this

your are passing a this in your html, which is the html tag itself, however, when you using this in your js function, that this is the function itself, so you will get error by trying to use the js function’s id as element id

«Uncaught TypeError: Cannot read property ‘remove’ of undefined»

This means the object you’re trying to remove doesn’t exist what makes complete sense because this.id isn’t defined anywhere.

To correctly reference a html element using javascript you need to use the document.getElementById() function. The id of the html element you’re trying to remove is i — so try document.getElementById(«i»);

Another — more elegant way — is to pass a reference to the object you clicked on with the callback function. This is simply done by adding event as a parameter. Inside the callback you can reference the element using e.target.

Источник