Remove and warp in jQuery

<div style="display: inline-block;">
  <div style="background-color: red" id="rm">Element will be remove</div>
  <button onclick="remove()">Remove</button>
</div>
<div style="display: inline-block;">
  <figure id="empty">
    <figcaption>Elements will be remove :</figcaption>
    <div style="background-color: green">Element one</div>
    <div style="background-color: purple">Element two</div>
  </figure>
  <button onclick="removeAll()">Empty content</button>
</div>
<div style="display: inline-block;">
  <dew>Text one</dew><br>
  <dew>Text two</dew><br>
  <button onclick="warp()">warp</button>
  <button onclick="unwrap()">unwrap</button>
</div>
<script>
  function remove() {
    $("#rm").remove();
  }
  function removeAll() {
    $("#empty").empty();
  }
  function warp() {
    $("dew").wrap("<div style='border: 2px solid blue'></div>");
  }
  function unwrap() {
    $("dew").unwrap();
  }
</script>