verwijderen span maar niet de tekst

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Paul Weiss

Paul Weiss

09/03/2022 12:35:58
Quote Anchor link
Hallo. weet iemand hoe ik de gehele span kan verwijderen met een specifieke class?
Ik wil de tekst laten staan. Heb al van alles geprobeerd, maar dan wordt ook de tekst verwijderd. heeft iemand een idee?

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
<h1 id="titel1-rijzoek"><span class="selected-text" style="color: rgb(133, 253, 13);">Titel 1 voorbeeld</span></h1>
 
PHP hulp

PHP hulp

03/10/2022 15:49:16
 
Ivo P

Ivo P

09/03/2022 14:22:13
Quote Anchor link
wat wil je als resultaat?

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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?
 
Paul Weiss

Paul Weiss

09/03/2022 14:34:45
Quote Anchor link
Hoi Ivo. Het resultaat moet inderdaad worden zoals je beschrijft. de string wordt via php echo weergegeven welke ik dan ook weer in een database kan opslaan.. de gehele html is contenteditable. onderstaande gehele code met contenteditable.
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)
PHP script in nieuw venster Selecteer het PHP script
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:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
<h1 id="titel1-rijzoek" contenteditable="true"><?php echo $titel1; ?></h1>



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)
PHP script in nieuw venster Selecteer het PHP script
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
<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>


Toevoeging op 09/03/2022 15:01:40:

Ik weet alleen niet wat de beste oplossing is via javascript of jQuery
 
Ad Fundum

Ad Fundum

09/03/2022 15:25:27
Quote Anchor link
jQuery IS JavaScript, 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. Dat zeiden ze in ieder geval over zichzelf op hun eigen site een poosje terug.

Tegenwoordig is er in JavaScript een one-liner voor om een node er tussenuit te halen:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
span.replaceWith(...span.childNodes);

Dus dat moet je dan verpakken in een lus, met alle resultaten van de selectie:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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).
 
Paul Weiss

Paul Weiss

09/03/2022 15:32:20
Quote Anchor link
oh bedankt. daar was ik mij nier bewust van inderdaad. kan de javascript inderdaad ok op mijn eigen server 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.
 
Ad Fundum

Ad Fundum

10/03/2022 09:54:13
Quote Anchor link
Gebruikelijk is om de span die je wilt verwijderen te voorzien van een HMTL ID. Dan kan je dit doen:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
span = document.getElementById('id-van-de-span');
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)
PHP script in nieuw venster Selecteer het PHP script
1
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
}

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.
 
Paul Weiss

Paul Weiss

10/03/2022 10:56:31
Quote Anchor link
hoi ad. bedankt voor je hulp. zal het even proberen. Heb nu het andere scrript van mijn andere topic werkend gekregen door een simpele oplossing. Zal dat hier wel even posten. Is een heel simpel script eigenlijk en maakt ook gebruik van localstorage.
 
Ozzie PHP

Ozzie PHP

10/03/2022 13:35:50
Quote Anchor link
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.
 
Ad Fundum

Ad Fundum

10/03/2022 16:14:04
Quote Anchor link
Als je helemaal aan het begin staat van: 'moet ik voor JS gaan of voor jQuery' kan je volgens mij beter voor JavaScript gaan. Die kennis is breder en algemener dan jQuery, en je kan dan ook nog eens makkelijk over naar een andere taal als TypeScript. Het verhoogt je kennis en kunde en dus marktwaarde.
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/
 
Paul Weiss

Paul Weiss

10/03/2022 16:55:49
Quote Anchor link
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)
PHP script in nieuw venster Selecteer het PHP script
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)
PHP script in nieuw venster Selecteer het PHP script
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?
 
Ozzie PHP

Ozzie PHP

10/03/2022 17:25:27
Quote Anchor link
Ik snap wat je zegt Ad Fundum, maar tegelijkertijd is jQuery vaak net wat makkelijker te programmeren, met als voordeel dat het in alle browsers werkt. Ja ... de eindgebruiker moet het jquery bestand inladen. Vroeger toen datasnelheden nog een issue waren, was het belangrijk om goed na te denken over de inzet van jquery. Tegenwoordig zijn de laadsnelheden (zeker in Nederland) echter zo snel dat dat geen issue meer is. Daarmee wil ik niet zeggen dat je voor een kleinigheidje jQuery moet gebruiken, maar meestal kun je het voor meerdere punten gebruiken en dan heeft het in mijn optiek wel een meerwaarde. Vanilla javascript is vaak wat complexer en je moet afwachten of het in elke browser werkt. jQuery is wat makkelijker te implementeren en werkt doorgaans in iedere browser.

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.
 
Paul Weiss

Paul Weiss

10/03/2022 17:32:07
Quote Anchor link
he Ozzie. bedankt voor je opmerkingen. Ik heb inderdaad gemerkt ja. als ik de nieuwe versie gebruik werkt een script niet en met de oude versie wel.
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.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.