CODEWITHSUNDEEP
jquery
Handmadegifts co
Handmadegifts co

Reputation: 117

JQuery detach vs remove

It is written in jQuery documentation that remove() on a selector removes all the events associated with it. But in the following code after remove function is called, alert associated with onclick on #this is not removed.. What am I missing here?

Code:

<div style="width:100%; min-height:100px; background-color:yellow;" id="add"  onclick="remove()">
    <ul id="remove" style="width:100%; background-color:purple; padding:4vh;">
        <li>
            <div id="this" style="width:100%; height:5vh; background-color:red;" onclick=alert("Clicked")>
                    Abc
            </div>
            <div style="width:100%; height:5vh; background-color:blue;">
                    XYZ
            </div>
            <div style="width:100%; height:5vh; background-color:orange;">
                    LMN
            </div>
        </li>
    </ul>
</div>

Jquery:

var t = 0;
var sp;
function remove(){
    if(t % 2 == 0){
        sp = $("#remove").remove();
        t++;
    }
    else{
        $("#add").append(sp);
        t++;
    }
}

Upvotes: 1

Views: 452

Answers (2)

Alex Yokisama
Alex Yokisama

Reputation: 1041

onclick attribute is not the same as .click() in jQuery. When appending sp, all the tags are back to DOM with their attributes. In fact, that handler is not not removed. It is reattached after appending. This will not happen if you use jQuery's .click() except of onclick

EDIT

For your example:

$("#this").click(function() { console.log(this); alert("Some text"); });

No need to use onclick in this case. This event will be detached after #this element is deleted. Also, this approach doesn't work on newly created elements.

If you need to handle some event (not only click) on dynamically generated elements you may use this approach:

$("body").on("#this", "click", click(function() { console.log(this); alert("Some text"); });

More information:

https://api.jquery.com/click/

https://api.jquery.com/on/

Upvotes: 1

chebaby
chebaby

Reputation: 7750

.remove() (jquery docs)

Similar to .empty(), the .remove() method takes elements out of the DOM. Use .remove() when you want to remove the element itself, as well as everything inside it. In addition to the elements themselves, all bound events and jQuery data associated with the elements are removed. To remove the elements without removing data and events, use .detach() instead.

onClick

HTML attribute should be avoided as It makes the markup bigger and less readable. Concerns of content/structure and behavior are not well-separated, making a bug harder to find.

your code

document.addEventListener("DOMContentLoaded", function() {

    var t = 0;
    var sp;
    function remove(){
        if(t % 2 == 0){
            sp = $("#remove").remove();
            t++;
        }
        else{
            $("#add").append(sp);
            t++;
        }
    }

    $('#add').on('click', function(event) {
        remove();
    });

    $('#this').on('click', function(event) {
        alert('clicked');
    });
    
});
<html>
	<head></head>
	<body>
		
		<div style="width:100%; min-height:100px; background-color:yellow;" id="add">
			<ul id="remove" style="width:100%; background-color:purple; padding:4vh;">
				<li>
					<div id="this" style="width:100%; height:5vh; background-color:red;">
						Abc
					</div>
					<div style="width:100%; height:5vh; background-color:blue;">
						XYZ
					</div>
					<div style="width:100%; height:5vh; background-color:orange;">
						LMN
					</div>
				</li>
			</ul>
		</div>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	</body>
</html>

Upvotes: 1

Related Questions