Question

It’s kinda simple piece of code, so i won’t explain what it does.

Problem here is after I click the .likes.1 div and then clicking .likes.2 div and then again .likes.1 it ends up showing me the .article-info div.

So even the attribute surname removed it stills perform it’s task.

Why is that so ?

$(document).ready(function() {

    $(".likes.1[surname|='first']").click(function() {
        generate('information');
        $(this).removeAttr('surname');
        $(".article-info").show();
    });

    $(".likes.2").click(function() {
        $(".article-info").hide();
    });

Answer 1

The binding of the click event happens on page load, or more accurately on DOM ready.

$(".likes.1[surname|='first']").click(function() { ... })

This binds the event to any and all elements that match that selector on pageload, removing an attribute, class, ID or anything else related to that selector at a later time will not change that, as the event is already bound.

You’ll need to unbind the event or use a delegated event handler, as a delegated handler will check the selector on every click:

$(document).on("click", ".likes.1[surname|='first']", function() { ... })

You should use the closest available parent to the targeted element instead of document (and a class consisting of just a number is generally not a good idea).

or something like :

$(".likes.1[surname|='first']").on('click', function() {
    generate('information');
    $(this).off('click');
    $(".article-info").show();
});