Develop Reference

How to completely remove div onclick with jquery?

There are some similar questions however my specific problem is an error in my code. I am able to remove the jumbotron div but there is a portion of it that still shows and I'm unsure why.
Here is the jsfiddle
https://jsfiddle.net/dominiconorton/2bdxvrwq/2/
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Blank</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Blank <span class="sr-only">(current)</span></a>
</li>
</ul>
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Sign out</button>
</div>
</nav>
<!-- Search tutorial -->
<div class="jumbotron" id="searchTutorial">
<div class="container">
<h1 class="display-4">Lorem Ipsum</h1>
<p> Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit
</p>
<div class="removeDiv">
<p>
<a class="btn btn-primary btn-lg " href="#" role="button">Close tutorial</a>
</p>
</div>
</div>
</div>
// close jumbotron //
jQuery(function($) {
$('.removeDiv').on('click', function() {
$(this).parent('div').remove();
});
});
I'm using Bootstrap 4.0 and JQuery 3.3.1
I tried changing the parent of the div so that the #searchTutorial is the parent and this didn't work as expected
I would like to completely remove the jumbotron div onclick of the close tutorial

Your javascript is removing the direct parent of the div being clicked, which is actually div.container. This isn't obvious because the indenting isn't consistent.
I would actually do #mark.hch's idea and use $(this).closest('.jumbotron').remove().
If you can change the structure, you might consider using <section> instead of <div> for the major elements, so that you can use $(this).closest('section').remove();

you have to specify the class
jQuery(function($) {$('.removeDiv a').on('click', function() {$('.jumbotron').remove();});

The parent of removeDiv is the container div and it's working as expected on click on remove div it removes its parent not the whole jumbotron div, that's why there is gray area appears after removing the container div, so in your case you have to directly select jumbotron div or select parent of parent.

Button to Clear text with Bootstrap

I'm using Bootstrap to generate tabs. I have a reset button which clears the content from the tab but it doesn't work. Here's my code:
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
<a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
<?php echo "Some text" ?>
<br><br>
<button type="button" class="btn btn-primary" value="Reset" onclick="document.nav-tabContent.nav-home.value=''">Clear</button>
</div>
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
</div>
So my "Clear" button should clear the text, "Some text". How would go about in clearing the text with the button??
tks

maybe you need to add some id or class at your "Some Text" php, like
<span id="abc"><?php echo "Some Text"; ?></span>
So you can access it with jquery or javascript like this onclick button
onclick="somefunction()"
And
somefunction() {
$('#abc').html("");
}

You could try wrap <?php echo 'some text'; ?> in for example a <p> tag and add this code to the onlick event in button tag
<button type="button" class="btn btn-primary" value="Reset" onclick="this.parentNode.querySelector('p').innerHTML = '';">Clear</button>
Try this live example having many tabs
const navItems = document.querySelectorAll('.nav-item')
const tabPanes = document.querySelectorAll('.tab-pane');
navItems.forEach(item => item.addEventListener('click', clear));
function clear(event) {
event.preventDefault();
const element = event.target;
const paneId = element.getAttribute('href').split('#')[1];
const pane = document.querySelector(`#${paneId}`);
clearNavItems();
clearPanes();
element.classList.add('active');
pane.classList.add('show');
pane.classList.add('active');
}
function clearNavItems() {
navItems.forEach(item => item.classList.remove('active'));
}
function clearPanes() {
tabPanes.forEach(pane => {
pane.classList.remove('active');
pane.classList.remove('show');
});
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
<a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
<a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus qui, pariatur ipsum ducimus numquam porro optio adipisci, nemo, cupiditate unde mollitia accusantium, suscipit. Explicabo, officiis corrupti praesentium. Quis, unde, fugit.</p>
<button type="button" class="btn btn-primary" value="Reset" onclick="this.parentNode.querySelector('p').innerHTML = '';">Clear</button>
</div>
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto.</p>
<button type="button" class="btn btn-primary" value="Reset" onclick="this.parentNode.querySelector('p').innerHTML = '';">Clear</button>
</div>
<div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa mollitia unde perspiciatis?</p>
<button type="button" class="btn btn-primary" value="Reset" onclick="this.parentNode.querySelector('p').innerHTML = '';">Clear</button>
</div>
</div>
</div>

Going by what you currently have, I would make the following edit:
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
<p id="nav-home-text"><?php echo "Some text" ?></p>
<br><br>
<button type="button" class="btn btn-primary" value="Reset" onclick="document.getElementById('nav-home-text').innerHTML=''">Clear</button>
</div>
Targeting to clear nav-home will also clear he button as the button is part of nav-home
Wrap the text in a <p> and give it an id so you could target it from the button using document.getElementById()
You should only target .value for elements that have the value attribute e.g <input>.

I think you need to add some jquery to remove the text.
first you need to place the text inside the span with the id content and clear the text inside the content using jquery.
you can use this.
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
<span id="content"><?php echo "Some text" ?></span>
<br><br>
<button class="btn btn-primary" onclick="$('#content').text('');">Clear</button>
</div>

Flash of unstyled content vuejs

I have problem. When I loading page with vue, I get variables: #{{ value }}. But when page full loaded, variable not visible. How I can fix this? I use bootstrap and all scripts included before: </body>.
My template:
<div class="container padding-bottom-3x mb-1">
<div class="row">
<div class="col-lg-9">
<ul class="messages-list" v-chat-scroll>
<message v-for="value,index in chat.message"
:key=value.index
:user=chat.user[index]
:time=chat.time[index]
>
#{{ value }}
</message>
</ul>
<div class="send-message">
<form action="">
<div class="form-group">
<span class="text-danger">#{{ typing }}</span>
<textarea class="form-control" v-model='message' #keyup.enter='send'></textarea>
</div>
</form>
</div>
<!-- <nav class="pagination">
<div class="column">
<ul class="pages">
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>...</li>
<li>12</li>
</ul>
</div>
<div class="column text-right hidden-xs-down"><a class="btn btn-outline-secondary btn-sm" href="#">Next <i class="icon-arrow-right"></i></a></div>
</nav> -->
</div>
<div class="col-lg-3">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti, iure totam ex laborum quidem vel nemo eveniet dolores natus id exercitationem veritatis maiores labore eum nam ab possimus, dolorum architecto!
</div>
</div>
</div>
Vue component:
<template>
<li>
<div class="row">
<div class="col-md-2 padding-right-none">
<div class="avatar-user text-center">
<img :src="user.avatar" alt="">
</div>
</div>
<div class="col-md-10 padding-left-none">
<div class="user-name">
<span>{{ user.name }} <i data-toggle="tooltip" title="Онлайн" class="material-icons online">fiber_manual_record</i> <span class="date float-right">{{ time }}</span></span>
</div>
<div class="message">
<slot></slot>
</div>
</div>
</div>
</li>
</template>
<script>
export default {
props: [
'user',
'time',
],
mounted() {
console.log('Component mounted.')
}
}

Try using v-text directive.
more detail
Example
<ul class="messages-list" v-chat-scroll>
<message v-for="value,index in chat.message"
:key=value.index
:user=chat.user[index]
:time=chat.time[index]
v-text="value"
>
</message>
</ul>
UPDATE-1
You can use v-html directive to update the element's innerHTML. More detail
Example
<ul class="messages-list" v-chat-scroll>
<message v-for="value,index in chat.message"
:key=value.index
:user=chat.user[index]
:time=chat.time[index]
v-html="value"
>
</message>
</ul>
UPDATE-2 (Recommended)
Or use v-cloak directive. That can keep the combined CSS rules on the element until the associated Vue instance finishes compilation.
Example
//Combine CSS rules to v-cloak
[v-cloak] {
display: none;
}
//use it in component
<ul class="messages-list" v-chat-scroll>
<message v-for="value,index in chat.message"
:key=value.index
:user=chat.user[index]
:time=chat.time[index]
v-cloak
>
{{value}}
</message>
</ul>
Click here to learn more about v-cloak at Vue official documentation page

Add class other element based on bootstrap .carousel-indicators li has class active

Hi i use bootstrap slider to slide element now i want when slider are slide than add a class in another section element. so try to do when .carousel-indicators li:nth-child(1) has class active than add class active also on .single-recent.first and than when .carousel-indicators li:nth-child(2) has class active than add class active on .single-recent.second and remove class active from .single-recent.first and any other all .single-recent element i have. and repeat it dynamically again and again.... but i didn't success to do that.
Here is the HTML code what i use:
<div id="launchgame-jumbotron-carousel" class="carousel slide carousel-fade work-carousel" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#launchgame-jumbotron-carousel" data-slide-to="0" class="active"></li>
<li data-target="#launchgame-jumbotron-carousel" data-slide-to="1"></li>
<li data-target="#launchgame-jumbotron-carousel" data-slide-to="2"></li>
<li data-target="#launchgame-jumbotron-carousel" data-slide-to="3"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat quia fuga, velit iure dolorum perferendis!</p>
</div>
<div class="item">
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat quia fuga, velit iure dolorum perferendis!</p>
</div>
<div class="item">
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat quia fuga, velit iure dolorum perferendis!</p>
</div>
<div class="item">
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat quia fuga, velit iure dolorum perferendis!</p>
</div>
</div>
<a class="left jumbotron-control" href="#launchgame-jumbotron-carousel" role="button" data-slide="prev"><i class="fa fa-angle-left"></i></a>
<a class="right jumbotron-control" href="#launchgame-jumbotron-carousel" role="button" data-slide="next"><i class="fa fa-angle-right"></i></a>
</div>
<section id="recent-featured" class="recent-featured-area">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="recent-featured-wrap">
<h3>Featured Work</h3>
<div class="single-recent first">
<div class="single-inner-img">
<img src="img/work/featured/featured-01.jpg" alt="">
</div>
<div class="single-active-effect">
<i class="fa fa-eye" aria-hidden="true"></i>
</div>
</div>
<div class="single-recent second">
<div class="single-inner-img">
<img src="img/work/featured/featured-02.jpg" alt="">
</div>
<div class="single-active-effect">
<i class="fa fa-eye" aria-hidden="true"></i>
</div>
</div>
<div class="single-recent third">
<div class="single-inner-img">
<img src="img/work/featured/featured-03.jpg" alt="">
</div>
<div class="single-active-effect">
<i class="fa fa-eye" aria-hidden="true"></i>
</div>
</div>
<div class="single-recent fourth">
<div class="single-inner-img">
<img src="img/work/featured/featured-04.jpg" alt="">
</div>
<div class="single-active-effect">
<i class="fa fa-eye" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
And the jQuery :
jQuery(document).ready(function(){
if ($("#launchgame-jumbotron-carousel ol.carousel-indicators li:nth-child(1)").hasClass('active')) {
$(".single-recent.first").addClass('active');
$(".single-recent.second").removeClass('active');
$(".single-recent.third").removeClass('active');
$(".single-recent.fourth").removeClass('active');
}
if ("#launchgame-jumbotron-carousel ol.carousel-indicators li:nth-child(2)").hasClass('active') {
$(".single-recent.second").addClass('active');
$(".single-recent.first").removeClass('active');
$(".single-recent.third").removeClass('active');
$(".single-recent.fourth").removeClass('active');
}
if ($("#launchgame-jumbotron-carousel ol.carousel-indicators li:nth-child(3)").hasClass('active')) {
$(".single-recent.third").addClass('active');
$(".single-recent.first").removeClass('active');
$(".single-recent.second").removeClass('active');
$(".single-recent.fourth").removeClass('active');
}
if ($("#launchgame-jumbotron-carousel ol.carousel-indicators li:nth-child(4)").hasClass('active')) {
$(".single-recent.fourth").addClass('active');
$(".single-recent.first").removeClass('active');
$(".single-recent.second").removeClass('active');
$(".single-recent.third").removeClass('active');
} });
Please help me to find out a way...

jQuery this and toggle issue

Hi friends I try learning jquery but I get some issues,
red label below picture- when i clicked it toggle is opening but when I clicked second one again first div is opening
my html
<ul class="otel-filtre-fiyat-tab">
<li class="otel-views"><a href="#"><img src="http://anitur.streamprovider.net/images/otel-filtre/d2.png" alt="" class="memnuniyet-durum" />
<strong>88/100</strong>
<span class="otel-goruntuleme">274 Görüntüleme</span>
</a></li>
<li class="otel-prices"><a href="#">
<strong>Tüm Fiyatlar</strong>
<span class="otel-goruntuleme">Size Özel en uygun fiyatlar</span>
</a></li>
</ul>
</div><!--otel filtre ozellikler-->
<div class="clr"></div>
</div><!--otel tek liste-->
<div class="otel-filtre-tab">
<div class="otel-tab-icerik otel-full-detay">
<div class="otel-degerlendirme">
<div class="degerlendirme-baslik">Değerlendirme</div>
<div class="otel-tab-detay">
<div class="degerlendirme-not">
<div class="c100 p85 green">
<span>85%</span>
<div class="slice">
<div class="bar"></div>
<div class="fill"></div>
</div>
</div><!--dairesel genel değerlendirme-->
</div><!-- degerlendirme not -->
<div class="degerlendirme-yorum">
<div class="yorum-bar">
<div class="yorum-bilgi">
<p>
<span class="otel-yorum-kisi">Hakan2020</span>
<span class="otel-yorum-konum">Denizli,Türkiye</span>
<span class="otel-yorum-tarih">26 Eylül 2015</span>
</p>
</div><!-- yorum bilgi -->
<div class="otel-yorum-profil">
<img src="http://anitur.streamprovider.net/images/otel-filtre/profile.jpg" alt="" />
</div>
<div class="yorum-content">
<h3>“Özellikle, yeme içme kalitesi arayanlar için...”</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque provident accusantium sint tempore! Fugiat debitis maxime eos? Devamını oku</p>
</div>
</div><!-- yorum bar-->
<div class="yorum-bar">
<div class="yorum-bilgi">
<p>
<span class="otel-yorum-kisi">Hakan2020</span>
<span class="otel-yorum-konum">Denizsiz,Türkiye</span>
<span class="otel-yorum-tarih">26 Eylül 2015</span>
</p>
</div><!-- yorum bilgi -->
<div class="otel-yorum-profil">
<img src="http://anitur.streamprovider.net/images/otel-filtre/profile.jpg" alt="" />
</div>
<div class="yorum-content">
<h3>“Özellikle, yeme içme kalitesi arayanlar için...”</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque provident accusantium sint tempore! Fugiat debitis maxime eos? Devamını oku</p>
</div>
</div><!-- yorum bar-->
</div><!-- degerlendirme yorum -->
</div>
<div class="clr"></div>
</div><!-- otel degerlendirme-->
<h3>Genel Değerlendirme</h3>
<div class="otel-genel-degerlendirme">
<div class="tum-degerlendirmeler">
Tüm Değerlendirmeler
<h4>Tüm İzlenimler</h4>
<h4 class="degerlendirme">%77 Çok İyi <span>2524 yoruma göre</span></h4>
</div><!--tum degerlendirmeler-->
<div class="diger-degerlendirmeler">
<ul class="tab-degerlendirme">
<li>%35 Çiftler</li>
<li>%35 Aile</li>
<li>%35 İş Seyahati</li>
<li>%35 Yalnız Gezginler</li>
</ul><!--tab menuler-->
<div class="tab-degerlendirme-icerik">
<div class="tab-filtre-icerik" id="ciftler">
<div class="demo-show2">
<h3>KAHVALTI <span class="accord-progress"></span><span class="mmn-oran">59%</span><span class="span-list">“Kahvaltı İyi”</span><span class="accord-chevron"></span></h3>
<div>Deneme 1 'in içeriği</div>
<h3>KAHVALTI <span class="accord-progress"></span><span class="mmn-oran">59%</span><span class="span-list">“Kahvaltı İyi”</span><span class="accord-chevron"></span></h3>
<div>Deneme 2 'in içeriği</div>
<h3>KAHVALTI <span class="accord-progress"></span><span class="mmn-oran">59%</span><span class="span-list">“Kahvaltı İyi”</span><span class="accord-chevron"></span></h3>
<div>Deneme 3 'in içeriği</div>
</div>
<!--<div id="progressbar-durum">
<div></div>
</div>-->
</div>
<div class="tab-filtre-icerik" id="aile">aile..
%35
</div>
<div class="tab-filtre-icerik" id="is-seyahati">iş seyahati..</div>
<div class="tab-filtre-icerik" id="yalniz-gezginler-bg">yalnız gezginler..</div>
</div><!-- tab icerik kismi-->
</div><!--diger degerlendirmeler-->
</div><!-- otel genel değerlendirme-->
</div><!-- tab icerik-->
<div class="otel-tab-icerik otel-fiyat-detay-icerik">otel içerik 2..</div><!-- tab icerik -->
</div><!-- otel filtre tab -->
toggle.js
$(document).ready(function(){
$(".otel-views a").on("click",function(){
$(".otel-full-detay:first").slideToggle();
return false;
});
});
what was my mistake ?
and codepen link:
http://codepen.io/cowardguy/pen/rxdpLp

You need to use other selector to reach your needed element. First you need to climb up in dom tree with .parent() or similar selector and then go down to your element in dom tree with .children() or .find() or other similar selector.
This is your working example:
$(".otel-views a").on("click",function(){
$(this).parents('.otel-tekli-listeleme').find('.otel-full-detay').slideToggle();
return false;
});
Here's fixed codepen