CODEWITHSUNDEEP
javascriptjqueryhtml
secret
secret

Reputation: 786

How to get id of specific Element

I am designing a website which is like bulletin board with stickers on it. So each sticker has a close button. But I cannot find the id of the sticker, which the user clicked on the close button.

stickerId = 1;
function createSticker(jsonNewSticker){     // receives json

    str = "<b>Email:</b> "+ jsonNewSticker.email+ 
    "</br> <b>Title:</b> "+ jsonNewSticker.title+
    "</br> <b>Summary:</b> "+ jsonNewSticker.summary+
    "</br> <b>Description:</b> "+ jsonNewSticker.description +
    "</br> <b>Entry expires: </b>" + jsonNewSticker.expiration_date;

    $("#mainForSticks").prepend("<div id= seq-"+ stickerId +" ></div>");
    $("#seq-"+ stickerId).attr("class","sticker");      
    $("#seq-"+ stickerId).html(str);

    $("#seq-"+ stickerId).append("<div id=report><a class=link href=javascript:reportCounter()>Report</a></div>"); // report  
    $("#report").attr("class","reportText");

    $("#seq-"+ stickerId).append("<div id=deleteSticker><a class=link href=javascript:deleteSticker()><b>X</b></a></div>"); // delete 
    $("#deleteSticker").attr("class","delSticker");
    //currentId = $(this).attr('id');
    stickerId++;

}

so here each sticker has an id: seq-1 seq-2 seq-3 ... 

function deleteSticker(){
    // how can I get id of specific sticker
}

Upvotes: 1

Views: 154

Answers (5)

Tim M.
Tim M.

Reputation: 54359

This is a good place for data attributes. They allow unobtrusive JavaScript and don't have any reliance on the document structure (e.g. as does the looking for the closest matching element).

Demo: http://jsfiddle.net/EN5Ht/2/

I suggest adding the ID of the associated item when the delete button is being generated.

As a side note, it appears that you may be assigning duplicate IDs ("report" and "deleteSticker") if you call createSticker() more than once. IDs must be unique.

Sample HTML

<button data-role="delete-button" data-id="seq-1">Delete</button>
<button data-role="delete-button" data-id="seq-2">Delete</button>
<button data-role="delete-button" data-id="seq-3">Delete</button>

<div id="seq-1">Item 1</div>
<div id="seq-2">Item 2</div>
<div id="seq-3">Item 3</div>

Note that there is no inline JavaScript and that we added a data-role and a data-id to each element. The delete buttons can be any element you want; they can be located anywhere within the document.

JavaScript

$("body").on("click", "[data-role='delete-button']", function(){
    var button = $(this);
    $("#" + button.data("id")).remove();
});

We then listen for all click events on matching elements (now, or dynamically added later) which are designated as delete buttons.

When the event is fired, we retrieve the button responsible and get the value of its data-id attribute. This tells us the associated element, which can then be hidden/removed as desired.

Upvotes: 0

gillyspy
gillyspy

Reputation: 1598

The sticker is relative to the close button so you don't really need the ID. I just use the closest() method and the appropriate selector.

However, whether you need ID or not, I put a dynamic handler on the sticker close buttons here. You can add as many stickers as you want. This makes your inline javascript call to javascript:anything obsolete, making the code easier to maintain.

The handler here is using deleteSticker as its callback but you can do whatever you want in it including get the ID (which I show in the alert) or delete the sticker, etc.

Bonus points for stickers with colors? :D

Fiddle

var deleteSticker = function(){
    var sticker = $(this).closest('[id^="seq"]');
        alert("your sticker # is: "+sticker.attr('id'));
    sticker.remove();
}

$('#mainForSticks').on('click', 'a', deleteSticker);

Upvotes: 2

Sachin
Sachin

Reputation: 40970

You can pass the Id in deleteSticker function and use it like this

function deleteSticker(item){
 var element=document.getElementById(item)
}

and add this function like this

var elementId="seq-"+ stickerId;
$("#seq-"+ stickerId).append("<div id=deleteSticker><a class=link href=javascript:deleteSticker(elementId)><b>X</b></a></div>"); // delete

Upvotes: 1

Samuel Liew
Samuel Liew

Reputation: 79022

Change 

$("#seq-"+ stickerId).attr("class","sticker");      
$("#seq-"+ stickerId).html(str);

$("#seq-"+ stickerId).append("<div id=report><a class=link href=javascript:reportCounter()>Report</a></div>"); // report  
$("#report").attr("class","reportText");

$("#seq-"+ stickerId).append("<div id=deleteSticker><a class=link href=javascript:deleteSticker()><b>X</b></a></div>"); // delete 
$("#deleteSticker").attr("class","delSticker");

To this:

$("#seq-"+ stickerId)
    .attr("class","sticker")
    .html(str)
    .append("<div id='report' class='reportText'><a class=link href='#'>Report</a></div>") // report  
    .append("<div id='deleteSticker' class='delSticker'><a class=link href='#'><b>X</b></a></div>"); // delete

Add this code outside of the function, in jQuery $(document).ready({, i.e.:

$(document).ready({
    $('body').on('click', '.delSticker', function() {
        deleteSticker(this);
    });
});

Then, change your deleteSticker() to:

function deleteSticker(elem) {
    $(elem).parents('.sticker').remove();
}

Upvotes: 0

JustWork
JustWork

Reputation: 1964

You can achieve this in two ways.

1st way is passing parameter to it like:

$("#seq-"+ stickerId).append("<div id=deleteSticker><a class=link href=javascript:deleteSticker(" + stickerId +")><b>X</b></a></div>"); // delete 

function deleteSticker(ID){
    var x = $("#" + ID);
}

2nd way is starts with selector, like:

$(function(){
    $('div[id^="#seq-"]').click(function(){
       // here is your click.
    });
});

Upvotes: 0

Related Questions