如何用JavaScript或JQuery删除HTML表格中指定的span元素

Got it, let's break down how to delete that target span element. Here are two approaches depending on whether you're using jQuery or plain JavaScript:

jQuery Solution #

This is concise and leverages jQuery's selector power to target the exact element directly:

// Target the span inside the 4th td of the tr with class "danger" and remove it
$('tr.danger td:eq(3) span').remove();

Quick breakdown: #

• tr.danger: Selects the table row with the "danger" class
• td:eq(3): Picks the 4th <td> (jQuery uses zero-based indexing, so 3 corresponds to the fourth element)
• span: Targets the span nested inside that td
• .remove(): Deletes the span element from the DOM entirely

If you prefer a more explicit, step-by-step chain (easier to read for some):

$('tr.danger')
  .find('td').eq(3)
  .find('span')
  .remove();

Vanilla JavaScript Solution #

If you don't want to rely on jQuery, here's a plain JS version with safety checks to avoid errors if elements are missing from the table structure:

// Grab the row with the "danger" class
const dangerRow = document.querySelector('tr.danger');

if (dangerRow) {
  // Get the 4th td (zero-indexed, so index 3)
  const fourthTd = dangerRow.querySelectorAll('td')[3];
  
  if (fourthTd) {
    // Locate the span inside the target td
    const targetSpan = fourthTd.querySelector('span');
    
    if (targetSpan) {
      // Remove the span from the DOM
      targetSpan.remove();
    }
  }
}

Quick breakdown: #

• We use native DOM methods like querySelector and querySelectorAll to grab elements step by step
• Each step includes a check to ensure the element exists before proceeding, preventing console errors if the table structure isn't exactly as expected
• remove() is a native DOM method that deletes the element from the page

Both methods will effectively remove the span you're targeting. Pick the one that fits your project's setup!

内容的提问来源于stack exchange，提问作者Christian Carl