HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>unwrap vs remove</title>
  <style>
    body { font-family: sans-serif; padding: 16px; max-width: 560px; }
    .box { border: 2px solid #cbd5e1; padding: 10px; margin: 10px 0; border-radius: 8px; }
    .box h4 { margin: 0 0 8px; font-size: 14px; color: #64748b; }
    .wrap { background: #fee2e2; padding: 6px; border-radius: 4px; }
    span.highlight { background: #fef08a; padding: 4px 8px; border-radius: 4px; }
    button { margin-right: 8px; margin-top: 8px; padding: 8px 14px; border: none; border-radius: 6px; cursor: pointer; color: #fff; }
    #btn-unwrap { background: #059669; }
    #btn-remove { background: #dc2626; }
    #log { margin-top: 12px; padding: 10px; background: #1e293b; color: #e2e8f0; border-radius: 6px; font-size: 13px; }
  </style>
</head>
<body>
  <div class="box" id="a">
    <h4>#a — unwrap span (parent .wrap removed)</h4>
    <div class="wrap"><span class="highlight">Keep this text</span></div>
  </div>
  <div class="box" id="b">
    <h4>#b — remove span (text deleted)</h4>
    <div class="wrap"><span class="highlight">Delete this text</span></div>
  </div>
  <button type="button" id="btn-unwrap">Unwrap #a span</button>
  <button type="button" id="btn-remove">Remove #b span</button>
  <div id="log">Click a button to see the difference.</div>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
    $("#btn-unwrap").on("click", function() {
      $("#a span").unwrap();
      $("#log").text("#a: .wrap div removed — yellow span text remains in DOM.");
    });
    $("#btn-remove").on("click", function() {
      $("#b span").remove();
      $("#log").text("#b: span deleted entirely — only empty .wrap div left.");
    });
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

jQuery .unwrap() vs .remove() (Try It)