如何隐藏跨度 class 但保留它的空间

Question

check the statement below:

L1: HEY. YOU

<div>L1:<span class="lang1"> HEY </span>. <span class="lang1"> YOU</span> </div>

if I use this jQuery below

    $(".btn").click(function () {
        $(".lang1").hide();
    });
});

it will hide HEY and YOU but it would then SHIFT THE. SEPARATOR TO THE LEFT when they hide. how can I edit this to hide HEY and YOU but with keeping their spaces so that the. separator remain still in the middle. I kinda think it has something to load a CSS class that is set to visibility:hidden / just not sure how to implement this / help plz?

Answer 1

Just set opacity to 0 in css with a class and use js to set this class to the span.

.lang1.opacity0{
   opacity:0; 
}

In JS

$(".btn").click(function () {
    $(".lang1").addClass('opacity0');
});

When you add class "opacity0" to the span it will now aplly the styles I entioned at the first.

Or hide text but with underscores using different class strategy applied with the same Jquery code:

.lang1.hidewithunderscore{
    color:transparent;
    border-bottom:1px solid #222;
}

In JS

$(".btn").click(function () {
    $(".lang1").addClass('hidewithunderscore');
});