javascript - 通过onclick方法将id传递给函数

我知道这里已经有很多这类问题，但是我找不到与我的具体情况相符的问题。

我只是想将onclick事件中的id变量传递给函数，但是我的设置方式有些不对劲

目的是能够删除单击X时添加的行

 $(document).ready(function () {
    $("#subjectlist")
        .change(function () {
            console.log("hit");
            $("select option:selected").each(function () {
                console.log($("select option:selected"));
                var id = 1;
                $('#overview').append("<tr id='id'><td>" +
                    $(this).text() + "</td><td id='id'
onclick='removeItem(id)'>" + "X" + "</td></tr>");
                id = id + 1;
            });
        })
        .trigger("change");

    $(".btn1").click(function () {
        $("#subjectlist").toggle();
    });
});

function removeItem(id) {
    console.log(id.val);
    console.log(id);
    $('#overview').find('tr td').eq(id).remove();
}

最佳答案

如果您的目标是删除单击的'td'元素。尝试这个...

$(document).ready(function () {
  var id = 1;
  $("#subjectlist")
      .change(function () {
          console.log("hit");
          $("select option:selected").each(function () {
              console.log($("select option:selected"));
              //var id = 1; moved this initialization up a scope level
              //on the line below I corrected the concatenation to have unique id's, and removed inline click event.
              $('#overview').append("<tr id='id'><td>" + $(this).text() + "</td><td id="+id+">" + "X" + "</td></tr>");
              id = id + 1;
          });
      })
      .trigger("change");

  $(".btn1").click(function () {
      $("#subjectlist").toggle();
  });
  // added click event to your dynamic element
  $("#overview").on('click','td', function() {
    $(this).parent().remove();
  });
});

/* removed
function removeItem(id) {
  console.log(id.val);
  console.log(id);
  $('#overview').find('tr td').eq(id).remove();
}*/