verwijderen span maar niet de tekst
Ik wil de tekst laten staan. Heb al van alles geprobeerd, maar dan wordt ook de tekst verwijderd. heeft iemand een idee?
Code (php)
1
<h1 id="titel1-rijzoek"><span class="selected-text" style="color: rgb(133, 253, 13);">Titel 1 voorbeeld</span></h1>
Code (php)
1
<h1 id="titel1-rijzoek">Titel 1 voorbeeld</h1>
En wil je dat met javascript doen? jQuery?
of heb je deze tekst in een string en wil je het met php ontdoen van die span?
Het verwijderen van de span is belangrijk omdat ik een javascript functie heb die de span inc stylling steeds toevoegt, maar de reeds aanwezige span niet overschrijft (zie ook mijn vorige topic (1e script helemaal bovenaan): https://www.phphulp.nl/php/forum/topic/fontpicker-text/104278/)
Code (php)
1
<h1 id="titel1-rijzoek" contenteditable="true"><span class="selected-text" style="color: rgb(133, 253, 13);">Titel 1 voorbeeld</span></h1>
Toevoeging op 09/03/2022 14:37:48:
het script voor toevoegen werkt allemaal prima, maar de span moet dus eerst verwijderd worden, anders heb ik op een gegeven moment diverse span achter elkaar staan. en dat is niet de bedoeling.
Toevoeging op 09/03/2022 14:42:18:
vergeet nog te vermelden dat ik de functie om de string op te slaan in de database allemaal al rond heb. de span wordt dan ook automatisch meegenomen.
in php ziet dat er dus als volgt uit:
Toevoeging op 09/03/2022 14:55:06:
Ik heb hieronder even de gehele code gezet inc. php en de javascript functie om de content van contenteditable via post door te sturen naar een php bestand die de content weer opslaat in de database. maakt het wat overzichtelijk allemaal. Probleem is dus zoals ik al aangaf dat er meerdere span achter elkaar komen te staan.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<h1 contenteditable="plaintext-only" id="titel1-rijzoek" class="heading-medium" id="rijxx"><?php echo $titel1; ?></h1>
<h2 contenteditable="plaintext-only" id="titel2-rijzoek" class="heading-small font-white"><?php echo $titel2; ?></h2>
<label for="fontkleur1">Kies fontkleur</label><br>
<input name="MyColorPicker" type="color" id="ColorPicker1" />
<button type="submit" name="save-rijzoek" id="save-rijzoek">Click to Save</button>
<script>
var box = document.getElementById('titel1-rijzoek');
let colorpicker = document.getElementById('ColorPicker1');
colorpicker.addEventListener('input', function(e) {
selObj = window.getSelection()
var selection = window.getSelection().getRangeAt(0);
var selectedText = selection.extractContents();
var span = document.createElement('span');
span.style.color = e.target.value;
span.className = 'selected-text';
span.appendChild(selectedText);
selection.insertNode(span);
})
</script>
<script type="text/javascript">
$(document).ready(function(argument) {
$('#save-rijzoek').click(function()
{
// Get edit field value
$titel1 = $('#titel1-rijzoek').html();
$titel2 = $('#titel2-rijzoek').html();
$button1 = $('#button1-rijzoek').html();
$rijnummerzoeken2 = rijzoek;
$.ajax({
url: 'edit-content/edit-content.php',
type: 'post',
data: {titel1:$titel1,titel2:$titel2,button1:$button1,rijnummerzoeken2:$rijnummerzoeken2},
datatype: 'html',
success: function(rsp){
location.reload();
});
});
}
);
</script>
<h1 contenteditable="plaintext-only" id="titel1-rijzoek" class="heading-medium" id="rijxx"><?php echo $titel1; ?></h1>
<h2 contenteditable="plaintext-only" id="titel2-rijzoek" class="heading-small font-white"><?php echo $titel2; ?></h2>
<label for="fontkleur1">Kies fontkleur</label><br>
<input name="MyColorPicker" type="color" id="ColorPicker1" />
<button type="submit" name="save-rijzoek" id="save-rijzoek">Click to Save</button>
<script>
var box = document.getElementById('titel1-rijzoek');
let colorpicker = document.getElementById('ColorPicker1');
colorpicker.addEventListener('input', function(e) {
selObj = window.getSelection()
var selection = window.getSelection().getRangeAt(0);
var selectedText = selection.extractContents();
var span = document.createElement('span');
span.style.color = e.target.value;
span.className = 'selected-text';
span.appendChild(selectedText);
selection.insertNode(span);
})
</script>
<script type="text/javascript">
$(document).ready(function(argument) {
$('#save-rijzoek').click(function()
{
// Get edit field value
$titel1 = $('#titel1-rijzoek').html();
$titel2 = $('#titel2-rijzoek').html();
$button1 = $('#button1-rijzoek').html();
$rijnummerzoeken2 = rijzoek;
$.ajax({
url: 'edit-content/edit-content.php',
type: 'post',
data: {titel1:$titel1,titel2:$titel2,button1:$button1,rijnummerzoeken2:$rijnummerzoeken2},
datatype: 'html',
success: function(rsp){
location.reload();
});
});
}
);
</script>
Toevoeging op 09/03/2022 15:01:40:
Ik weet alleen niet wat de beste oplossing is via javascript of jQuery
Tegenwoordig is er in JavaScript een one-liner voor om een node er tussenuit te halen:
Code (php)
1
span.replaceWith(...span.childNodes);
Dus dat moet je dan verpakken in een lus, met alle resultaten van de selectie:
Code (php)
1
spans = hoofdnode.querySelectorAll('span');
Toevoeging op 09/03/2022 15:27:47:
Kleine nabrander: Google is AVG-gif, je riskeert een boete als je zonder kennisgeving website bezoekers de kant van Google opstuurt, of het nu voor een lettertype is, jQuery of een andere dienst (die je zelf ook prima vanaf je eigen server kan hosten).
Toevoeging op 09/03/2022 15:34:21:
even terugkomend op jouw reactie. jQuery is javascript weet ik. Bedoelde het anders. Maar doel is duidelijk inderdaad. Ben nog niet zo heel erg thuis in javascript. ben met name met php bezig om dat onder de knie krijgen. Maar is ook ontzettend veel. Ik zou niet weten hoe ik dan zou moeten doen zoals je aangeeft! Kun je mij daarbij helpen?
Toevoeging op 09/03/2022 19:57:24:
Ik heb wel een oplossing gevonden voor het verwijderen van de span. maar ook weer niet. het verwijderd ook andere span. dit topic kan worden gesloten.
Code (php)
1
2
2
span = document.getElementById('id-van-de-span');
span.replaceWith(...span.childNodes);
span.replaceWith(...span.childNodes);
Wil je meerdere spans tegelijk verwijderen, maar niet alle, dan is het handig om de spans te voorzien van een CLASS attribuut. Dan kan je dit doen:
Code (php)
1
2
3
4
5
2
3
4
5
hoofdnode = document.body; // of een sub-node die je selecteert met document.getElementById()
spans = hoofdnode.querySelectorAll('span.met-eigen-css-class'); // je selecteert hier met een CSS selector
for (span in spans) { // alle gevonden spans met eigen css class vanaf hoofdnode langslopen
span.replaceWith(...span.childNodes); // en de span er tussenuit halen
}
spans = hoofdnode.querySelectorAll('span.met-eigen-css-class'); // je selecteert hier met een CSS selector
for (span in spans) { // alle gevonden spans met eigen css class vanaf hoofdnode langslopen
span.replaceWith(...span.childNodes); // en de span er tussenuit halen
}
Zoiets zou ik er van maken.
jQuery is net als JavaScript ook iets wat je je eerst eigen moet maken, beide kost een tijdsinvestering. En als je dan toch moet kiezen zou ik voor puur JavaScript gaan, omdat die standaard nu inmiddels wel is uitgekristalliseerd.
Maar je kan baat hebben bij jQuery als je niet zelf het wiel wil uitvinden om je code werkend te krijgen met alle obscure (ook mobile) browsers, zoals bij publieke websites. Of als je gebruik wil maken van het ecosysteem van jQuery voor een interface.
Ad Fundum op 09/03/2022 15:25:27:
... en als je geen reden hebt om jQuery te willen gebruiken kan je beter voor puur JavaScript gaan, want het hele doel van jQuery is zichzelf overbodig maken.
Kun je uitleggen wat je hiermee bedoelt?
>> als je geen reden hebt om jQuery te willen gebruiken kan je beter voor puur JavaScript gaan
Klinkt als: als je geen reden hebt om de auto te gebruiken, kun je 'm beter laten staan. Euh ja ... lijkt me logisch?
>> want het hele doel van jQuery is zichzelf overbodig maken
Leg uit.
Je doet het nu overkomen alsof jQuery geen (meer)waarde heeft, terwijl het dat wel degelijk heeft. Maar misschien begrijp ik je verkeerd.
Daarbij had jQuery op hun site documentatie ooit staan dat ze de API niet gingen uitbreiden, omdat hun doel was om jQuery overbodig te maken. Ik begreep daaruit dat ze het meer zagen als tijdelijke oplossing totdat er meer consensus was tussen browsers. Nu Google de browseroorlog gewonnen heeft kunnen we allemaal fijn gebruik maken van dezelfde open standaarden.
jQuery is een library ooit bedoeld om niet na te hoeven denken hoe je iets in Internet Explorer opgelost krijgt terwijl het in Netscape Navigator al lang werkt. Het enige verschil is dat we nu mooie ECMA-standaarden hebben waardoor er veel minder verschillen zijn in browsers. Als je niet ziet hoe je voor jezelf tijd kunt winnen door jQuery op een efficiëntere manier te gebruiken dan JavaScript dan ben je er volgens mij (nog) niet aan toe.
jQuery (Core) is meer dan alleen een library om het makkelijker te maken om met meerdere browsers te werken en die bugs in browsers omzeilt. Ze hebben ook een library voor gebruiksinterface spul (jQuery UI), jQuery Mobile (niet langer ondersteund..), Sizzle en QUnit. En er zijn ook een heleboel plug-ins te krijgen voor jQuery.
Alles kan z'n voordelen hebben, maar ik vind dat je wel moet weten waar je voor kiest als je voor software van een derde partij kiest. Want kiezen voor jQuery betekent ook dat je afhankelijk bent van de library (30k minified), die je dan wel steeds up-to-date moet houden op je site.
Toevoeging op 10/03/2022 16:23:05:
Interessant leesvoer: https://stackoverflow.blog/2021/11/10/does-es6-make-javascript-frameworks-obsolete/
Het is natuurlijk een extern script, maar als ik deze dan lokaal op mijn eigen server plaats is er toch niet aan de hand? de pagina blijft dan toch gewoon werken? Of kan ik dan nog steeds problemen verwachten. Ik ben namelijk vrij nieuw op het gebied van javascript. vandaar.
Code (php)
1
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
Toevoeging op 10/03/2022 16:56:18:
Ik maak voor een pagina gebruik van jQuery. onderstaand het script wat ik dan inlaad. Deze was noodzakelijk voor een script dat ik nodig had.
Het is natuurlijk een extern script, maar als ik deze dan lokaal op mijn eigen server plaats is er toch niet aan de hand? de pagina blijft dan toch gewoon werken? Of kan ik dan nog steeds problemen verwachten. Ik ben namelijk vrij nieuw op het gebied van javascript. vandaar.
Code (php)
1
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
Toevoeging op 10/03/2022 17:07:54:
Wat ik mij ook nog afvraag is het volgende: er zijn natuurljk verschillende versie van jQuery. Werken alle functies uit de oude versie dan ook nog in de nieuwe versie?
Of dienen bepaalde functiescan wellicht anders geformuleerd te worden?
Ik snap nu in ieder geval waar jouw opmerking vandaan kwam. Uiteraard is het goed om na te denken of je jQuery wel of niet inzet, maar het heeft wel degelijk z'n voordelen.
>> Het is natuurlijk een extern script, maar als ik deze dan lokaal op mijn eigen server plaats is er toch niet aan de hand?
Nee, dat zou ik sowieso aanraden zelfs. Het voordeel als je die link gebruikt is dat de kans aanwezig is dat de gebruiker 'm al in z'n cache heeft staan omdat een andere website diezelfde link gebruikt. Echter, als die link om een of andere reden niet (meer) bereikbaar is, werkt jouw site niet goed meer. Daarom zou ik 'm lokaal opslaan.
>> Werken alle functies uit de oude versie dan ook nog in de nieuwe versie?
Niet per definitie. Soms worden bepaalde functies niet meer ondersteund of krijgen ze een andere naam.
>> Of dienen bepaalde functiescan wellicht anders geformuleerd te worden?
Dat zou kunnen. Dat zou je dus altijd moeten testen op het moment dat je een nieuwere versie gaat gebruiken.
Enige oplossing is dan om voor het desbetreffende script de oude in te laden en voor andere scripts waarbij de nieuwe versie vereist is de nieuwe in te laden. Ik heb maar een paar script waarbij ik jQuery gebruik, dus dat maakt dan niet zoveel uit. Zal de script dan wel lokaal zetten inderdaad.