Javascript 正在传递元素的id，但正在获取元素本身

是我的问题的一个例子，下面是相同的代码 HTML

<button id='preview_btn'>Add</button>

<table id="point_tbl">

</table>

添加

JavaScript

var pointList = [];

function deletePoint(id) {
  console.log(id);     // should be string but turns out to be the tr element
    for (var i = 0; i < pointList.length; i++) {
        if (pointList[i].id == id) {
            pointList.splice(i, 1);
            document.getElementById(id).remove();
            document.getElementById(id + "item").remove();
        }
    }
}

function getTemplate(obj) {
    var id = obj.id + "item";
    var aa = obj.id;
    var row = "<tr id = '" + id + "'><td>" + obj.sn + "</td><td>" + obj.x + "</td><td>" + obj.y + "</td><td>" + obj.tx + "</td><td>" + obj.ty + "</td><td>" + obj.lbl + "</td><td><button  class='del_point' onclick = 'deletePoint("+id+");'>Delete</button></td></tr>";
    return row;
}

document.getElementById("preview_btn").onclick = function(event) {
var id =  getUniqueId();
    var obj = {sn: pointList.length, x: 10, y: 10, tx: "0.5", ty: "0.5", lbl: "", id: id};
    $('#point_tbl').append(getTemplate(obj));
    pointList.push(obj);
}

function getUniqueId() {
    if (!getUniqueId.idList) {
        getUniqueId.idList = [];
    }
    var id = "uniqueID" + Math.round(Math.random() * 1000 + 1);
    if (getUniqueId.idList.indexOf(id) != -1) {
        return getUniqueId();
    } else {
        getUniqueId.idList.push(id);
    }
    return id;
}

var pointList=[]；
函数deletePoint（id）{
console.log（id）；//应该是字符串，但实际上是tr元素
对于（变量i=0；i

单击

添加

按钮时，将添加一个带有按钮的新行。 在这个新添加的按钮上，使用

getTemplate

函数绑定

deletePoint

函数。

deletePoint

函数接受由

getTemplate

函数创建的行（tr）的id

我正在将传递的参数记录在

deletePoint

函数中。我原以为这是行的id（基本上是一个字符串），但结果却是整个

tr

元素

---

无法解决此问题，请提供帮助。

发生的情况是事件处理程序中生成的代码是

deletePoint(someId)

而不是

deletePoint("someId")

由于大多数浏览器在全局范围内为具有id的所有元素创建变量（变量的名称就是id），因此传递的是元素，而不是字符串（在某些浏览器中，传递的是

未定义的

）

即时修复：更改

onclick = 'deletePoint("+id+");'

到

---

更好：不要在HTML中内联JS代码以避免这些问题。例如，为您的单元格指定一个id和数据属性，然后像处理其他元素一样绑定。

您可以更改删除函数以解决此问题

function deletePoint(id) {
  id.remove();
}

---

谢谢，这是可行的，但无法理解当前方式的问题。你能给我解释一下吗？

function deletePoint(id) {
  id.remove();
}