尝试使用 jquery 更改表中复制行的 ID 时获取“removeAttr 不是函数”

Question

I am trying to copy rows from one HTML table to another. In my case home address rows to billing address rows. I need to copy the entire HTML tr elements (with childrens) to ensure number of fields match (I can add more address fields as a user). so just values isn't enough.

I have successfully cloned the source tr s, successfully updated the class of the tr 's from homeStreet to billingStreet , can paste the new tr rows ok, but how to update the ID's of the individual input fields from input#home-street-1 to input#billing-street-1 . Each tr has one td with the input btw.

I keep getting stuck and getting different errors. Ultimately I'd like to do 1-5 fields (ID's home-street-n with n from 1 to 5) but initially I would settle for 1, ie change table#billing input#home-address-1 to be input#billing-street-2 in the new table#billing HTML table

My code is

  $('tr.billingStreet').remove();           // Start by removing previous fields.
  const homeStreets = $('tr.homeStreet').clone();
  const billingStreets = homeStreets.removeClass('homeStreet').addClass('billingStreet');
  const billingStreet1 = billingStreets[0]
  billingStreet1.removeAttr('id');          // <-- Error "billingStreet1.removeAttr is not a function"
  billingStreet1.attr('id','billing-street-1');

  // this part works to paste the row
  const beforeRow = $('tr#sameAs');
  beforeRow.after(billingStreet1);

Error:

Uncaught TypeError: billingStreet1.removeAttr is not a function

Adding console.log('billingStreets) gives

k.fn.init(2) [tr.billingStreet, tr.billingStreet, prevObject: k.fn.init(2)]
0: tr.billingStreet
1: tr.billingStreet

showing the added class to the new tr's

Answer 1

Why are you removing attribute if in the next line you overwrite that?

Remove line:

 billingStreet1.removeAttr('id');

you don't need that.