jQuery: Umgebendes HTML Element (Wrapper) entfernen und Inhalte beibehalten

Submitted by Julian Pustkuchen on 8. September 2011 - 18:25

Heute ein Mini-Script für die JQuery Freunde.

Ziel war es, ein Element von seinem umgebenden HTML-Element freizustellen, dabei jedoch die Inhalte beizubehalten.

Lösung war für mich das folgende Script:

/**
* Entfernt das äußerste Wrapper-Element innerhalb des Selektors.
* Beispiel: <a href="../target.html">Content</a> ==> <a href="../target.html">Content</a>
*/
function removeChildWrapper(selector){
$(selector).each(function(){
$(this).html($(this).children().html());
});
}

Vielleicht hilft es ja dem ein oder anderen auch bei derselben Problemstellung?
Oder habt ihr eine bessere Lösung, ggf. sogar eine passende jQuery Methode?

Ich freue mich über Anregungen und Verbesserungen.

Einordnung:

Comments

http://api.jquery.com/unwrap/

Submitted by Oliver (not verified) on 8. September 2011 - 23:39.

http://api.jquery.com/unwrap/ ?

Hey, vielen Dank für den

Submitted by Julian Pustkuchen on 8. September 2011 - 23:51.

Hey, vielen Dank für den Hinweis, das ist ja schon fast (vielleicht!) peinlich, dass ich das nicht gefunden habe.

An dieser Stelle ging es allerdings direkt um das Elternelement eines Text-Node. Ich werde morgen direkt mal testen, ob das dort auch funktioniert.

Beispiel:

Text

<-- Strong entfernen! Wie lautet der Selektor mit unwrap?

Vielleicht:

$('strong').children().unwrap();

Hat hier jemand Erfahrung?

Also spontan bekomme ich für

Submitted by Julian Pustkuchen on 8. September 2011 - 23:56.

Also spontan bekomme ich für Textnodes keine funktionierende Lösung hin. Habt ihr eine?
(Ist dann erstmal doch nicht so peinlich, hoffe ich)

Eine kurze Alternative zu meiner Lösung ist aber vielleicht?

$('.my-wrapper').replaceWith( $(this).contents() );

$('strong').replaceWith(this.

Submitted by Oliver (not verified) on 8. September 2011 - 23:59.

$('strong').replaceWith(this.childNodes);

Das müsste den Zweck erfüllen

In meinem Test werden dadurch

Submitted by Julian Pustkuchen on 9. September 2011 - 0:03.

In meinem Test werden dadurch gerade die Texte (Textnode Inhalte) auch entfernt. Klappt also nicht. Kannst du das Problem bestätigen?

Laut jQuery Api sollte sowas

Submitted by Oliver (not verified) on 9. September 2011 - 0:08.

Laut jQuery Api sollte sowas auch funktionieren. Aber ich hab jetzt weder das noch das letzte selbst probiert.

$('strong').contents().unwrap();

Post new comment

Your name: *

E-mail: *

The content of this field is kept private and will not be shown publicly. If you have a Gravatar account associated with the e-mail address you provide, it will be used to display your avatar.

Homepage:

Subject:

Comment: *

Web page addresses and e-mail addresses turn into links automatically.
Internal paths in single or double quotes, written as "internal:node/99", for example, are replaced with the appropriate absolute URL or path. Paths to files in single or double quotes, written as "files:somefile.ext", for example, are replaced with the appropriate URL that can be used to download the file.
Allowed HTML tags: <a> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd><blockquote>
Lines and paragraphs break automatically.
Pairs of<blockquote> tags will be styled as a block that indicates a quotation.
You can enable syntax highlighting of source code with the following tags: <c>, <cpp>, <css>, <drupal5>, <drupal6>, <java>, <javascript>, <mysql>, <php>, <python>, <ruby>, <smarty>, <xml>. The supported tag styles are: <foo>, [foo]. PHP source code can also be enclosed in <?php ... ?> or <% ... %>.
Textual smileys will be replaced with graphical ones.
Each email address will be obfuscated in a human readable fashion or (if JavaScript is enabled) replaced with a spamproof clickable link.

More information about formatting options

Notify me when new comments are posted

Word verification: * Type the characters you see in this picture.

(verify using audio)

Type the characters you see in the picture above; if you can't read them, submit the form and a new image will be generated. Not case sensitive.

Julian Pustkuchen ist passionierter Software- & Webentwickler mit den Schwerpunkten Softwaredesign, Objektorientierung, Ablaufoptimierung und Usability bei webks. Ein weiterer Schwerpunkt ist die Entwicklung im CMS Drupal.
Er besitzt einen Abschluss als B.Sc. Wirtschaftsinformatik (dual) und studiert derzeit für seinen Abschluss als Master of Science Wirtschaftsinformatik.