CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Devbuddy
Devbuddy

Reputation: 231

Remove the wrapper `div` from the whole `h1 - h6` tag and only wrap the current one

I'm trying to remove the wrapper <div class="headWrap"> from the whole h1 - h6 tag and I need only wrap the current heading tag when I click on this.

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;
}

Upvotes: 3

Views: 686

Answers (4)

Sagar V
Sagar V

Reputation: 12478

You need 2 things.

  1. Include jQuery

  2. unwrap all other headers and wrap only the clicked header.

This is the same code from the fiddle. All I did is

Added jQuery library

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

added code to unwrap all headers on each 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 that point. You can't simply use ==. use jQuery .is() instead to check similarity.

Upvotes: 2

sn3ll
sn3ll

Reputation: 1685

Just remove the headWrap class from the element right before adding it to the clicked element:

$('.headWrap').removeClass('headWrap');

Also, is there an additional reason you are wrapping them in a div? There is no reason to for this effect.

Fiddle

Upvotes: 1

charlietfl
charlietfl

Reputation: 171690

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>

Upvotes: 1

gaetanoM
gaetanoM

Reputation: 42054

Your issue is in this line:

if($(clickedtag == headings)){

If you need to test if current target element is an header element you can write:

if ($(clickedtag).is('h1, h2, h3, h4, h5, h6')){

.is(selector): Check the current matched set of elements against 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>

In order to remove the div for the non clicked element you can write:

$('h1, h2, h3, h4, h5, h6').unwrap();

Upvotes: 1

Related Questions