How to Clear the Content of a Div Using JavaScript

How do I clear the content of a div using JavaScript?

Just Javascript (as requested)

Add this function somewhere on your page (preferably in the <head>)

function clearBox(elementID)
{
    document.getElementById(elementID).innerHTML = "";
}

Then add the button on click event:

<button onclick="clearBox('cart_item')" />

In JQuery (for reference)

If you prefer JQuery you could do:

$("#cart_item").html("");

How to empty the content of a div

If your div looks like this:

<div id="MyDiv">content in here</div>

Then this Javascript:

document.getElementById("MyDiv").innerHTML = "";

will make it look like this:

<div id="MyDiv"></div>

Clearing div element using JavaScript

Ok, I finally created what I wanted. Thanks everyone for answer. I had to change the way of adding text to the div, had to change it all on text so the innerHTML could clear it easy. I had to not use <br /> but instead of "\n", so it display next text properly. Here what I have now:

html

      <ul>
            <li id="lap" onclick="displayLap()">Lap</li>
            <li id = "clear" onclick="clearLaps()">Clear laps</li>
       </ul>
<div id="outputLaps"></div>

function displayLap() {
    numberOfLap++;
    var str = "Number of lap: " + numberOfLap + " time: " + minutes + ":" + seconds + ":0" + milliseconds + "\n";
    document.getElementById("outputLaps").appendChild(
            document.createTextNode(str))
}
function clearLaps() {
    numberOfLap = 0;
    document.getElementById("outputLaps").innerHTML = "";
}

How do i clear text out of a div using javascript

Since you want to clear the item anyways and put your new text in, why even bothering with the conditional? You could just as easily do:

function dostuff(what) {
    where.innerHTML = what;
};

Working example

How to clear div content onclick?

I think it will be better if you can use a container element and set its content rather than to use document.write()

<html>
<head><script>

        var now = new Date();
        var year = now.getFullYear();
        var month = now.getMonth();
        var monthName = getMonthName(month);
        var time = now.toLocaleTimeString();
        var date = now.getDate();
        now = null;
        var calElem = document.getElementById("cal");

        function febDays(year) {
            if (year % 4 == 0) {
                return 29;
            } else {
                return 28;
            }
        }

        function getDays(month, year) {
            var days = new Array(12);
            days[0] = 31;
            days[1] = febDays(year);
            days[2] = 31;
            days[3] = 30;
            days[4] = 31;
            days[5] = 30;
            days[6] = 31;
            days[7] = 31;
            days[8] = 30;
            days[9] = 31;
            days[10] = 30;
            days[11] = 31;
            return days[month];
        }

        function getMonthName(month) {
            var mn = new Array(12);
            mn[0] = "January";
            mn[1] = "February";
            mn[2] = "March";
            mn[3] = "April";
            mn[4] = "May";
            mn[5] = "June";
            mn[6] = "July";
            mn[7] = "August";
            mn[8] = "September";
            mn[9] = "October";
            mn[10] = "November";
            mn[11] = "December";
            return mn[month];
        }

        function monthName(month) {
            var mn = new Array(12);
            mn[0] = "Jan";
            mn[1] = "Feb";
            mn[2] = "Mar";
            mn[3] = "Apr";
            mn[4] = "May";
            mn[5] = "Jun";
            mn[6] = "Jul";
            mn[7] = "August";
            mn[8] = "September";
            mn[9] = "October";
            mn[10] = "November";
            mn[11] = "December";
            return mn[month];
        }

        function setCal() {
            var firstDay = new Date(year, month, 1);
            var startDay = firstDay.getDay();
            firstDay = null;
            var days = getDays(month, year);
            drawCal(startDay + 1, days, date, monthName, year, month);
        }

        function previousMonth() {
        document.getElementById('cal').innerHTML = "";
            month--;
            var monthName = getMonthName(month);
            var firstDay = new Date(year, month, 1);
            var startDay = firstDay.getDay();
            firstDay = null;
            var days = getDays(month, year);
            drawCal(startDay + 1, days, date, monthName, year, month);
            if (monthName === "January"){
                year--;
                month = 11;
                monthName = getMonthName(month);
                firstDay = new Date(year, month, 1);
                startDay = firstDay.getDay();
                firstDay = null;
                days = getDays(month, year);
            drawCal(startDay + 1, days, date, monthName, year, month);
            }
        }

        function nextMonth() {
        document.getElementById('cal').innerHTML = "";
            month++;
            var monthName = getMonthName(month);
            var firstDay = new Date(year, month, 1);
            var startDay = firstDay.getDay();
            firstDay = null;
            var days = getDays(month, year);
            drawCal(startDay + 1, days, date, monthName, year, month);
            if (monthName === "December"){
                year++;
                month = 0;
                monthName = getMonthName(month);
                firstDay = new Date(year, month, 1);
                startDay = firstDay.getDay();
                firstDay = null;
                days = getDays(month, year);
            drawCal(startDay + 1, days, date, monthName, year, month);
            }
        }

        function drawCal(startDay, lastDate, date, monthName, year, month) {
            var headerHeight = 50;
            var border = 2;
            var cellspacing = 4;
            var headerSize = "+3";
            var colWidth = 60;
            var dayCellHeight = 25;
            var cellHeight = 40;
            var todayColor = "red";
            var text = "";
            text += '<div id="cal">';
            text += '<TABLE BORDER=' + border + ' CELLSPACING=' + cellspacing + '>';
            text += '<TH COLSPAN=7 HEIGHT=' + headerHeight + '>';
            text += '<FONT SIZE=' + headerSize + '>';
            text += monthName + ' ' + year;
            text += '</FONT>';
            text += '</TH>';

            var openCol = '<TD WIDTH=' + colWidth + ' HEIGHT=' + dayCellHeight + '>';
            var closeCol = '</TD>';

            var weekDay = new Array(7);
            weekDay[0] = "Sunday";
            weekDay[1] = "Monday";
            weekDay[2] = "Tuesday";
            weekDay[3] = "Wednesday";
            weekDay[4] = "Thursday";
            weekDay[5] = "Friday";
            weekDay[6] = "Saturday";

            text += '<TR ALIGN="center" VALIGN="center">';
            for (var dayNum = 0; dayNum < 7; ++dayNum) {
                text += openCol + weekDay[dayNum] + closeCol;
            }
            text += '</TR>';


            var digit = 1;
            var curCell = 1;

            for (var row = 1; row <= Math.ceil((lastDate + startDay - 1) / 7); ++row) {
                text += '<TR ALIGN="right" VALIGN="top">';
                for (var col = 1; col <= 7; ++col) {
                    if (digit > lastDate)
                        break;
                    if (curCell < startDay) {
                        text += '<TD></TD>';
                        curCell++;
                    } else {
                        if (digit == date) {
                            text += '<TD HEIGHT=' + cellHeight + '>';
                            text += '<FONT COLOR="' + todayColor + '">';
                            text += digit + "   ";
                            text += '</FONT>';
                            text += '</TD>';
                        } else
                            text += '<TD HEIGHT=' + cellHeight + '>' + digit + '</TD>';
                        digit++;
                    }
                }
                text += '</TR>';
            }


            text += '</TABLE>';
            text += '</CENTER>';
            text += '</div>';
            text += '<button onclick="previousMonth()"><</button>';
            text += '<button onclick="nextMonth()">></button>';

            document.getElementById('calc').innerHTML=text;

        }

    </script></head>
<body onload="setCal()">
    <div id="calc"></div>
</body>
</html>

Remove text from a div

To remove the text, you can store the children selectors first and clear the parent with innerHTML='' and add that children selectors again.

const parent = document.querySelector(".input-group-append");
const childs = [];
for(let i = 0; i < parent.children.length; i ++) {
  childs.push(parent.children[i]);
}

parent.innerHTML = '';
childs.forEach((item) => parent.appendChild(item));

<div class="input-group-append">
  <button type="submit" class="btn btn-search">Submit Button</button>
  Test Text
</div>

How to clear all <div>s’ contents inside a parent <div>?

jQuery('#masterdiv div').html('');

Remove the contents under classname using Javascript

You can use innerHTML to clear the contents of the element after it has been selected:

// select element with class 'social-share:
var social_share = document.querySelector('.social-share');

// Set it's contents to an empty string
social_share.innerHTML = '';

Remove last 3 letters of html div content with javascript

Try:

function slice() {
  var t = document.getElementById("time");
  t.textContent = t.textContent.slice(0, -3);
}
slice();

<p id="time">1234567890</p>