Press a unique button do the actions

Question

So as I started using JavaScript and jQuery, I have a question with unique div.

Is is possible in the JavaScript to make a unique div name then do the action onclick?

Example HTML:

<div id="favoriteXBSbQG6fNlObroDG4ML2l9VRO/yNpvIFxL0Qjr6bP2A=">
    <a href="#" id="XBSbQG6fNlObroDG4ML2l9VRO/yNpvIFxL0Qjr6bP2A=" class="btn btn-danger">Me</a>
</div>
<div id="favoriteakkbN3eo8h0Q7S4ouHqMX7cU9vNLNKw3llO/PK0e9qI=">
    <a href="#" id="akkbN3eo8h0Q7S4ouHqMX7cU9vNLNKw3llO/PK0e9qI=" class="btn btn-danger">Me 2</a>
</div>

JavaScript:

$(function() {
    $('.favorite').click(function() {
        var element = $(this);
        var verify = element.attr("id");
        alert(verify);
        $('#favorite'+verify).hide();
    });

});

When I press a first a from div I wanna get the id value as a alert and hide it.

will also have problems having special characters in `id` which will have to be escaped ... see selectors section of jQuery API — charlietfl, Nov 22 '14 at 00:38
@charlietfl I cannot view the jQuery API site normaly, there are no letters in the site dunno why :D, so basicly removing special characters will fix the problem? — WinterTime, Nov 22 '14 at 00:43
special characters is only part of your problem, what @DavidThomas meant was you don't have a `class=favorite` which is what your selector is looking for — charlietfl, Nov 22 '14 at 00:45
same code, just adding class to tags http://jsfiddle.net/agmr2ytd/6/ — charlietfl, Nov 22 '14 at 00:47
No, it wouldn't. It appears that you don't know what you're doing, which is fine, but the onus is on you to learn. Start with css selectors: http://www.w3.org/TR/css3-selectors/#selectors — David Thomas, Nov 22 '14 at 00:47
Think he wanted to select anchor using its parent which has an ID that starts with `favorite...` - look at my answer. — skobaljic, Nov 22 '14 at 01:11

baao · Answer 1 · 2014-11-22T00:52:55.927

You need to set class = favorite to your divs, then this is working:

DEMO

jQuery / javascript:

$(function() {
    $('.favorite').click(function() {
        var element = $(this);
        var verify = element.attr("id");
        alert(verify);
        var tohide = document.getElementById(verify);
        tohide.style.display = 'none';
    });

});

HTML:

<div id="favoriteXBSbQG6fNlObroDG4ML2l9VRO/yNpvIFxL0Qjr6bP2A=" class="favorite">
    <a href="#" id="XBSbQG6fNlObroDG4ML2l9VRO/yNpvIFxL0Qjr6bP2A=" class="btn btn-danger">Me</a>
</div>
<div id="favoriteakkbN3eo8h0Q7S4ouHqMX7cU9vNLNKw3llO/PK0e9qI="  class="favorite">
    <a href="#" id="akkbN3eo8h0Q7S4ouHqMX7cU9vNLNKw3llO/PK0e9qI=" class="btn btn-danger">Me 2</a>
</div>

score 1 · Accepted Answer · edited May 23 '17 at 12:05

Your selector is wrong, for attributes ^= means "attribute value starts with":

$(function() {
    $('[id^=favorite] a').click(function() {
        var element = $(this);
        var verify = element.attr("id");
        alert(verify);
        $('#favorite'+verify.replace(/([ #;?%&,.+*~\':"!^$[\]()=>|\/@])/g,'\\$1')).hide();
    });
});

Example Fiddle <-

Your ID has to be escaped, used this answer for solution.

Press a unique button do the actions

2 Answers2