JQuery Div Tag Code

1
votes

Solving this assignemnt. CSS and html code is given! But the add div tag function is not working. How to add div tag to the html page after remove?

Write a code for following :

a)Write CSS Class Header block : border 1, color- blue , font size-20, font name- arial, padding 50px.

b)Write CSS Class Footer block: border 1, color- black , height-20% ,width-100 %, back ground color- grey;

c)Write a jquery code for Add Header block Class and Footer block on button click.

d)Write a jquery code for Remove Header block Class and Footer block on button click.

e)Write a jquery code for Toggle Header block Class and Footer block on button click.

$(document).ready(function() {
  $('.remove').click(function() {
    $('.header').remove();
    $('.footer').remove();
  });
});

$(document).ready(function() {
  $('.add').click(function() {
    $('body').addClass('div.header');
    $('body').addClass('div.footer');
  });
});
.header {
  border: 1px solid;
  color: blue;
  font-size: 20;
  font-family: arial;
  padding: 50px;
}

.footer {
  border: 1px solid;
  color: black;
  height: 20%;
  width: 100%;
  background-color: grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<head>
  <link rel='stylesheet' style='text/css' href='a30.css'></link>
  <script src='../jquery.js'></script>
</head>

<body>
  <div class='header'>
    This is header!
  </div>
  <button class='add'>Add</button>
  <button class='remove'>Remove</button>
  <div class='footer'>
    This is footer!
  </div>

</body>

</html>

Please help me find a solution!

2
javascriptjqueryhtmlcss
Once removed from the DOM, you need to completely recreate the html that is missing. You could save it in a variable or just use .show() and .hide() in Jquery - DraganAscii

2 Answers

2
votes
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
    $("#hide").click(function(){
        $("p").hide();
    });
    $("#show").click(function(){
        $("p").show();
    });
});
</script>
</head>
<body>

<p>If you click on the "Hide" button, I will disappear.</p>

<button id="hide">Hide</button>
<button id="show">Show</button>

</body>
</html>

the remove() function in jQuery deletes the element, so you'll need to create everything again. Using hide and show functions would be the best approach if you want to toggle elements.

0
votes

Your JavaScript is incorrect, your code will add 2 classes to the <body> tag so it ends up: <body class="div.header div.footer">

Instead you need to add the elements to the body.

Update:

$(document).ready(function() {
  $('.add').click(function() {
    $('body').addClass('div.header');
    $('body').addClass('div.footer');
  });
});

to:

$(document).ready(function() {
  $('.add').click(function() {
    $('body').prepend('<div class="header"></div>');
    $('body').append('<div class="footer"></div>');
  });
});

$('body').prepend() will add the element to the beginning of the element provided $('body').append() will add the element to the end of the element provided

Note: because the divs being prepended/appended are empty they will added empty, you can add more html inside these elements when adding if needed.

Or as mentioned above you could just hide/show the header/footer elements using:

$(document).ready(function() {
  $('.remove').click(function() {
    $('.header, .footer').hide(); // hide footer and header divs
  });

  $('.add').click(function() {
    $('.header, .footer').show(); // show footer and header divs
  });
});