Code has been added to clipboard!

jQuery .remove(): Delete Elements With Their Content, Events and Data

Reading time 1 min
Published Jan 22, 2018
Updated Sep 27, 2019

jQuery remove: Main Tips

  • jQuery .remove() function deletes the selected element with all of its content.
  • It eliminates all events and data associated with the specified elements.
  • To remove elements but keep their data and events, apply .detach() instead.

Usage of .remove()

If you wonder which jQuery method is used to remove selected elements, you should know there's more than one answer. However, only jQuery .remove() gets rid of the selected elements including their children, nodes, text, events, and data.

See in the example below how jQuery .remove() function is used to remove a link:

Example
$("button").click(() => {
    $("a").remove();
});

Follow this syntax to delete element jQuery has:

$("selector").remove(selectorExpression);

A selectorExpression is an optional parameter used to filter the set of elements to be removed.

Tip: to remove descedants and string texts within elements, use .empty() instead of jQuery .remove().

Learn jQuery
Introduction
Selectors
Events
Event Methods
Download
Callback
Chaining
Get and Set
Add Element
Remove Element
Traverse
Parent
Children
Sibling Traverse
Filtering
jQuery AJAX
Effects
Show and Hide
Fade Effect
Slide Effect
Animate Effect
Manipulate CSS
Width and Height
.addClass()
.after()
.animate()
.append()
.appendTo()
.attr()
.before()
.bind() (deprecated)
.blur()
.change()
.click()
.clone()
.css()
.dblclick()
.delay()
.delegate() and .undelegate() (deprecated)
.detach()
.empty()
.end()
.error() (deprecated)
.fadeIn()
.fadeOut()
.fadeTo()
.fadeToggle()
.finish()
.focus()
.focusIn()
.focusOut()
.hasClass()
.height()
.hide()
.hover()
.html()
.innerHeight()
.innerWidth()
.insertAfter()
.insertBefore()
.keypress()
.keyup()
.live() and .die() (deprecated)
.load() (deprecated)
.mousedown()
.mouseenter()
.mouseleave()
.mousemove()
.mouseout()
.mouseover()
.mouseup()
.off()
.offset()
.offsetParent()
.on()
.one()
.outerHeight()
.outerWidth()
.position()
.prepend()
.prependTo()
.prop()
.proxy()
.queue()
.ready()
.remove()
.removeAttr()
.removeClass()
.removeProp()
.replaceAll()
.replaceWith()
.resize()
.scroll()
.scrollLeft()
.scrollTop()
.show()
.slideDown()
.slideToggle()
.slideUp()
.stop()
.submit()
.text()
.toggle()
.toggleClass()
.trigger()
.triggerHandler()
.unbind() (deprecated)
.unload() (deprecated)
.unwrap()
.val()
.width()
.wrap()
Event Properties
event.currentTarget
event.preventDefault()
event.relatedTarget
event.stopImmediatePropagation()
event.stopPropagation()
event.target
event.timeStamp
event.type
event.which
jQuery .find()
jQuery .keydown()
jQuery.noConflict()
pageY and pageX