Удалить ссылку при нажатии JS

Question

Прошу помочь решить такую проблему. Есть готовое решение по скрытию/открытию текста по ссылке

var ns6 = document.getElementById && !document.all ? 1 : 0
var head = "display:''"
var folder = ''

function expandit(curobj) {
  folder = ns6 ? curobj.nextSibling.nextSibling.style : document.all[curobj.sourceIndex + 1].style
  if (folder.display == "none")
    folder.display = ""
  else
    folder.display = "none"
}

Текст виден <a href="javascript:void(0);" class=p onClick="expandit(this)">Показать полностью</a>
<span style="display:none">текст не виден</span>

А необходимо, чтобы при нажатии на ссылку "Показать полностью" эта ссылка исчезала и появлялся весь текст. По полной аналогии как сделано вконтакте

Заранее спасибо :)

Answer 1

<div class="text">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias porro enim, in. Minima ab sapiente, rerum cumque ea, possimus delectus.
</div>
<div class="more">Показать полностью</div>

<style>
    .text{
        width: 150px;
        height: 20px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }
    .more{
        cursor: pointer;
        color: blue;
    }
</style>

<script>
    $('.more').click(function() {
        $(this).fadeOut(0)
        $('.text').css({'height': 'auto', 'white-space': 'normal'})
    })
</script>

Answer 2

Удаление любого элемента при клике происходит так:

let del = document.getElementById('js-self-delete');

del.addEventListener('click', function(){
    this.outerHTML = "";
  // del.outerHTML = "";
  // this.parentNode.removeChild(this);
  
  // this ссылается на объект, в контексте которого вызвана функция
  // (здесь это кликнутая кнопка)
});

<button id="js-self-delete">Удали меня!</button>

В вашем случае:

function expandit(btn) {
  btn.nextElementSibling.style.display = "block";
  btn.outerHTML = "";
}

Текст виден <a href="javascript:void(0);" class="p" onclick="expandit(this)">Показать полностью</a>
<span style="display: none;">какой-тоо текст...</span>

Но onclick="..." создает кучу проблем, как только скрипт начинает делать чуть больше вещей, чем скрывать одну кнопку. Поэтом стоит изначально привыкнуть не использовать его)

document.addEventListener('click', function(e){
  if( !e.target.matches('.js-show-text') ) return;
  
  e.target.nextElementSibling.classList.remove('hidden');
  e.target.outerHTML = "";
});

// см. «Делегирование Событий»

.hidden {
  display: none;
}

Текст-1 <a class="js-show-text" href="javascript:void(0);">Показать полностью</a>
<span class="hidden">Скрытый-1</span>
<hr>
Текст-2 <a class="js-show-text" href="javascript:void(0);">Показать полностью</a>
<span class="hidden">Скрытый-2</span>

P.s. Если кнопок не очень много, CSS тоже справится:

.hidden {
  display: none;
}

label {
  color: #045acf;
  text-decoration: underline;
  cursor: pointer;
}

.cb:checked ~ label { display: none; }
.cb:checked ~ div.hidden { display: block; }

<div>
  <input id="cb-1" type="checkbox" class="hidden cb"> Текст-1
  <label for="cb-1">Показать полностью</label>
  <div class="hidden">Скрытый-1</div>
</div>

<hr>

<div>
  <input id="cb-2" type="checkbox" class="hidden cb"> Текст-2
  <label for="cb-2">Показать полностью</label>
  <div class="hidden">Скрытый-2</div>
</div>

БЛОГ НА HUSL

Удалить ссылку при нажатии JS

Ответы (2 шт):