Jquery remove element

Question

I am basically trying to print the value of a button in the div with list class if the button is selected. Also remove the same value wwhen it is deselected. I am able to print the value successfully but not able to remove it. Could somebody please help me out with it.

var buttonSelect = $(".btn").click(function() {
    if ($(this).hasClass('active')){
        $(".list").append(this.value + "   ")
    }
    else {
        $(".list").remove(this.value)
    }
});

this is the HTML element, and $(this) is the jQuery object. Try to use $(".list").remove($(this)) — Yerko Palma
– Yerko Palma, Commented Mar 26, 2015 at 13:38
$(this) would remove the whole button aint it? It would select the object i suppose — Tauseef Hussain
– Tauseef Hussain, Commented Mar 26, 2015 at 13:46
Yes, because remove() removes an object, if you just want to clear the text you can do $(this).text("") or any of the answers listed below — Yerko Palma
– Yerko Palma, Commented Mar 26, 2015 at 14:23
jquery.remove() removes elements from the DOM, a TextNode is not an element.. however, both are "objects".. so I would refrain from using object as some sort of qualifier here.. — Brett Caswell
– Brett Caswell, Commented Mar 26, 2015 at 14:49
here.. this is the distinction.. nodeType w3schools.com/dom/dom_nodetype.asp — Brett Caswell
– Brett Caswell, Commented Mar 26, 2015 at 14:51

Milind Anantwar · Accepted Answer · 2015-03-26 13:38:53Z

2

You should rather append the content along with html element like span:

$(".btn").click(function() {
if ($(this).hasClass('active')){
     $(".list").append('<span class="newval_'+this.value+'">'+this.value + "</span>");
}else{ 
     $(".list").find('.newval_'+this.value).remove();
}});

answered Mar 26, 2015 at 13:38

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Tauseef Hussain Over a year ago

Thank you so much :) Worked perfect! However i dont understand the need to use the span element. Would be indebted if you could tell me the concept.

Paul Over a year ago

What append is doing is creating a text object and sticking it on the end. It's not a string manipulator, it's a DOM manipulator. In order to have something to remove later, you need to have an object in the DOM to remove and a text object won't work. This code adds a span object to the page as the very last thing inside .list and then removes the span object when the button is pressed again. Hope that helps!

Tauseef Hussain Over a year ago

Clear now! Thank you :)

Spencer Wieczorek · Accepted Answer · 2015-03-26 13:48:07Z

1

The parameters from .remove() is a selector, just having a value in there that contains the content of the element you want to remove will not work. For example if I had this:

<li class="list">test</li>

Doing $(".list").remove("test") will not remove it. You will probably want to use the :contains selector (since you may have the value with spaces at the end). So in the example above doing $(".list").remove(":contains('test')") will remove the element. You can do the same thing in your case:

$(".list").remove(":contains('"+this.value+"')");

answered Mar 26, 2015 at 13:48

Spencer Wieczorek

21.7k7 gold badges46 silver badges57 bronze badges

Comments

DarkBee · Accepted Answer · 2025-11-22 11:35:40Z

1

If you want to remove the element itself along with everything in it, just use jQuery’s remove() method.

$(document).ready(function() {
    $("button").click(function() {
        $("div").remove();  //remove Div element
    });
});

edited Nov 22 at 11:35

DarkBee

14.4k9 gold badges84 silver badges133 bronze badges

answered Feb 1, 2021 at 20:01

thomas

6319 silver badges7 bronze badges

Collectives™ on Stack Overflow

Jquery remove element

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related