Jack Vawdrey Jack Vawdrey - 1 month ago 4
jQuery Question

Remove <span> when text is clicked

I have the following HTML:

<span class="deleted typo" id="typo1" contenteditable="false"> innovation via workplace diversity</span>


I need to remove the
<span>
element without removing the inside text when I click on the text itself, and it needs to be only on this element, not others with the same class. Is this possible with jQuery?

Answer

$('#typo1').click(function() {

  $(this).contents().unwrap("<span></span>");

})
.deleted{color:red}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="deleted typo" id="typo1" contenteditable="false"> innovation via workplace diversity</span>

Use .contents() together with .unwrap()

.contents()

Description: Get the children of each element in the set of matched elements, including text and comment nodes.

.unwrap()

Description: Remove the parents of the set of matched elements from the DOM, leaving the matched elements in their place.

Comments