Remove the `div` wrapper from the whole` h1 - h6` tag and only wrap the current one
I am trying to remove the wrapper <div class="headWrap">
from the whole tag h1 - h6
and I only need to wrap the current title tag when I click on it.
Here is the link: https://jsfiddle.net/q8yhoxhd/4/
HTML:
<h1>
Heading Test content 1
</h1>
<h2>
Heading Test content 2
</h2>
<h3>
Heading Test content 3
</h3>
Js
$(function(){
$(document).on('click', function(event){
var clickedTag;
clickedtag = event.target;
event.stopPropagation();
var headings = $('h1, h2, h3, h4, h5, h6');
if($(clickedtag == headings)){
$(clickedtag).wrap($('<div/>').addClass('headWrap'));
}
});
});
CSS
.headWrap {
background-color:red;
color:#fff;
}
source to share
You need 2 things.
-
Include jQuery
-
expand all other headers and wrap just the clicked header.
This is the same code from the violin. All I did was
Added jQuery library
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
added code to expand all headers on every click event.
$(headings).unwrap();
$(document).ready(function(){
$(document).on('click', function(event){
var clickedTag;
clickedtag = event.target;
event.stopPropagation();
var headings = $('h1, h2, h3, h4, h5, h6');
$(headings).unwrap();
if($(clickedtag).is(headings)){
$(clickedtag).wrap($('<div/>').addClass('headWrap'));
}
});
});
.headWrap {
background-color:red;
color:#fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>
Heading Test content 1
</h1>
<h2>
Heading Test content 2
</h2>
<h3>
Heading Test content 3
</h3>
<p>Test</p>
Thanks to gaetanoM. I missed this point. You cannot just use ==
. use jQuery . is () instead to check for similarity.
source to share
Your problem is this line:
if($(clickedtag == headings)){
If you need to check if the current target element is a header element, you can write:
if ($(clickedtag).is('h1, h2, h3, h4, h5, h6')){
... is (selector) : check the currently matched set of elements for a selector, element, or jQuery object and return true if at least one of these elements matches the given arguments.
$(document).on('click', function(event){
var clickedTag;
clickedtag = event.target;
event.stopPropagation();
if ($(clickedtag).is('h1, h2, h3, h4, h5, h6')){
$('h1, h2, h3, h4, h5, h6').unwrap();
$(clickedtag).wrap($('<div/>').addClass('headWrap'));
}
});
.headWrap {
background-color:red;
color:#fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>
Heading Test content 1
</h1>
<h2>
Heading Test content 2
</h2>
<h3>
Heading Test content 3
</h3>
Another approach can be based on event delegation:
$(document).on('click', 'h1, h2, h3, h4, h5, h6', function(event){
$(document).on('click', 'h1, h2, h3, h4, h5, h6', function(event){
var clickedTag;
clickedtag = event.target;
event.stopPropagation();
$('h1, h2, h3, h4, h5, h6').unwrap();
$(clickedtag).wrap($('<div/>').addClass('headWrap'));
});
.headWrap {
background-color:red;
color:#fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>
Heading Test content 1
</h1>
<h2>
Heading Test content 2
</h2>
<h3>
Heading Test content 3
</h3>
To remove a div for an element without a click, you can write:
$('h1, h2, h3, h4, h5, h6').unwrap();
source to share
Try something like:
$(function() {
$(document).on('click', 'h1,h2,h3', function(event) {
var $heading = $(this);
//unwrap others (if they are wrapped)
$('.headWrap').contents().unwrap();
if ($heading.parent('.headWrap').length) {
// unwrap this one if second click - (remove if not desired behavior)
$heading.unwrap()
} else {
// or wrap this one
$heading.wrap($('<div/>', { class: 'headWrap' }));
}
});
});
.headWrap {
background-color: red;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>
Heading Test content 1
</h1>
<h2>
Heading Test content 2
</h2>
<h3>
Heading Test content 3
</h3>
source to share