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

Question

I know there are many of these types of questions already on here, but I can't find one that matches my specific case.

I just want to pass an id variable into a function from an onclick event, but there's something not right about the way I've got is set up

The goal is to be able to remove the rows that have been added when the X is clicked

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

Answer 1

If your goal is to remove the 'td' element that is clicked. Try this...

$(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();
}*/

Answer 2

Try changing this

 $('#overview').append("<tr id='id'><td>" + $(this).text() + "</td><td id='id' onclick='removeItem(id)'>" + "X" + "</td></tr>");

To this... should be less confusing, regarding the quote-nesting... notice the use of backticks (`) on the outermost quote level. Also restyled it to make it easier to read, and match html syntax more visually.

 $('#overview').append(
   `<tr id=x_id_`+id+`>` +
     `<td>` + 
       $(this).html() +
     `</td>` +
     `<td onclick="$('#x_id_` +
       id +
     `').remove()">` +
       `X` +
     `</td>` +
    `</tr>`
  );

You can ditch the removeItem function entirely.

Since I don't have the rest of your code, not totally sure about the change to the $().html vs $().text, but this should produce a clickable element that will remove the whole row with that id label, which is coded into the rows id and the onclick function.

This will produce html like:

<tr id=x_ix_1><td>PREVIOUS STUFF HERE</td><td onclick='removeItem(`x_id_1`)'>X</td></tr>

Couple things:

First, keep in mind you can only have one element with a particular id at a time. Duplicates will cause errors (but you can remove an element with a particular id and make a new one with that same id, they just can't co-exist).

If you don't want the row removed, but just the td, move the bit about the elements id from the tr to the td-- can't have same id on both.

The quote-nesting was incorrect with the id variable, so was adding it as litteral text (just the string 'id', not the variable content)...

And html id's need to start with a letter. So I re-nested it so the id will parse as variable contents, and the html output will contain 'x_id_' prepended to the variable content... ie x_id_0 x_id_1 etc.

Answer 3

Your appending string is incorrectly formatted.

Drop the id attribute on the table column since your removeItem() function should be targeting the table row.

You can use back ticks to generate template literals like so...

$('#overview').append(`<tr id="${id}">
  <td>${$(this).text()}</td>
  <td onclick="removeItem(${id});"> X </td>
</tr>`);

The jQuery.eq() function is an index based filter, not an selector filter. You can then utilise the id selector...

function removeItem (id) {
  $(`#${id}`).remove();
}