Javascript 如何获取特定元素的id

我正在设计一个网站，它就像一个贴着标签的公告板。所以每个贴纸都有一个关闭按钮。但是我找不到用户点击关闭按钮的标签的id

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++;

}

---

您可以在

deletepicker

函数中传递Id，并像这样使用它

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

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

然后像这样添加这个函数

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

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

var elementId=“seq-”+标签ID；
$（“#seq-”+stickerId）。附加（“”；//删除

您可以通过两种方式实现这一点

第1种方式是向其传递参数，如下所示：

$("#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);
}

改变

$("#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");

然后，将您的

删除标签（）

更改为：

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

---

标签是相对于关闭按钮的，因此您不需要真正的ID。我只需要使用

closest（）

方法和适当的选择器

然而，无论您是否需要ID，我在这里的贴纸关闭按钮上放置了一个动态处理程序。您可以添加任意数量的贴纸。这使得对

javascript:anything

的内联javascript调用过时，使代码更易于维护

这里的处理程序使用deleteSticker作为其回调，但您可以在其中执行任何操作，包括获取ID（我在警报中显示）或删除标签等

彩色贴纸的奖励积分？：D

这是一个好地方。它们允许不引人注目的JavaScript，并且不依赖于文档结构（例如，查找最接近的匹配元素）

演示：

我建议在生成delete按钮时添加关联项的ID

作为旁注，如果多次调用

createSticker（）

，您可能会分配重复的ID（“报告”和“删除标签”）。ID必须是唯一的

示例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>

然后，我们侦听指定为删除按钮的匹配元素（现在或以后动态添加）上的所有单击事件

---

当触发事件时，我们检索负责的按钮并获取其

数据id

属性的值。这告诉我们相关的元素，然后可以根据需要隐藏/删除。

为什么要将

#deleteStapper

类属性设置为

delstapper（elementId）

？ohh@Musa非常感谢，我刚才犯了一个错误。我已经更新了它。内联javascript失败。虽然op正在使用它。此外，如果他有多个标签，第二种方式将失败“内联javascript失败”？大量的硬编码标记，使用“javascript”伪协议，链接作为按钮，HTML文档中的XML标记，等等。那么为什么选择内联侦听器呢？在给定OP的情况下，建议的解决方案是最简单的实现方法。

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

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

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

<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>

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