<span> entfernen, wenn Text

Question

geklickt wird Ich habe folgende HTML:

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

ich den inneren Text ohne Entfernen des <span> Element entfernen müssen, wenn ich selbst auf den Text klicken, und es muss auf diese nur sein, Element, nicht andere mit der gleichen Klasse. Ist das mit jQuery möglich?

Answer 1

$('#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>

Verwenden .contents() zusammen mit .unwrap()

.contents()

Beschreibung: die Kinder jedes Elements in dem Satz von abgestimmten Elementen Get, einschließlich Text und Kommentar-Knoten.

.unwrap()

Beschreibung: Entfernen Sie die Eltern des Satzes von abgestimmten Elementen aus dem DOM, an ihrer Stelle die angepassten Elemente zu verlassen.

Answer 2

Versuchen Sie, diese mit Jquery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 

<script> 

$(document).ready(function(){ 
     $("#typo1").click(function(){ 
      $(this).remove(); 
     }); 
}); 

</script> 

Answer 3

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


$("#typo1").click(function(){ 
     $("p").unwrap(); 
}); 

Answer 4

Just for fun und didaktische Art und Weise, ohne lib, diese eine reine Javascript-Lösung ist.

document.getElementById('typo1').addEventListener('click', function() { 
 
    var mySpan = document.getElementById('typo1'); 
 
    var parentNode = mySpan.parentNode ; 
 
    while (mySpan.firstChild) parentNode.insertBefore(mySpan.firstChild, mySpan); 
 
    mySpan.parentNode.removeChild(mySpan); 
 

 
});

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

Answer 5

, was Sie brauchen, ist dies:

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

    // get the text 
    var t = $(this).text(); 

    // get the parent to add the text after removing the span 
    var p = $(this).parent() 

    // remove the span 
    $(this).remove(); 

    // set the text back to parent 
    p.text(t); 

    // if the parent has more controls you may have to append 
    // p.append(t); 

}); 

https://jsfiddle.net/tedmanowar/ykb1px05/

Answer 6

Hier ist, was ich gefunden habe. .unwrap() wird nicht funktionieren, da das das übergeordnete Element des Selektors entfernt, nicht das Element um den Textknoten. Sie müssen ersetzen this mit dem childNodes:

$(document).ready(function(){ 
    $(".typo").click(function(){ 
     $(this).replaceWith(this.childNodes); 
    }); 
});