We Keep Coding

The HTML button with JS code does not perform the action I requested

I was testing changing the JS commands, but the button doesn’t do anything. I’m thinking, it’s the CSS or HTML that’s wrong. I tried it without any CSS, a much more basic code, and it works for the JS part, and it deletes the div. It might be something of the CSS, but I’m not sure.
This is my code:
function eliminarDiv() {
var div = document.querySelector("al-login");
div.parentNode.removeChild(div);
}
#import url('https://fonts.cdnfonts.com/css/insaniburger');
.al-login {
width: 300px;
color: rgb(255, 255, 255);
border-radius: 5px;
background: rgb(95, 184, 220);
text-align: center;
height: 70px;
margin-top: 100px;
margin-left: calc(50% - 150px);
line-height: 0px;
}
.button-x {
position: relative;
width: 20px;
height: 20px;
margin-top: 3px;
margin-left: 267px;
border-radius: 5px;
background: rgb(135, 135, 135);
border: 2px rgb(135, 135, 135);
}
.button-x .x-button {
margin-top: 1px;
margin-left: -1px;
color: white;
font-size: 14px;
font-family: 'Insaniburger';
text-transform: none;
}
<script src="https://kit.fontawesome.com/b99e675b6e.js"></script>
<div class="al-login">
<!--fas fa-eye fa-square-x-->
<button class="button-x" onclick="eliminarDiv()"><p class="x-button">X</p></button>
<p style="line-height: 0px; margin-top: 10px;">Dear user, you can login</p>
<br style="line-height: 0px;">
</div>

This works:
function eliminarDiv() {
var div = document.querySelector(".al-login");//you forgot to add a point
div.parentNode.removeChild(div);
}
#import url('https://fonts.cdnfonts.com/css/insaniburger');
.al-login {
width: 300px;
color: rgb(255, 255, 255);
border-radius: 5px;
background: rgb(95, 184, 220);
text-align: center;
height: 70px;
margin-top: 100px;
margin-left: calc(50% - 150px);
line-height: 0px;
}
.button-x {
position: relative;
width: 20px;
height: 20px;
margin-top: 3px;
margin-left: 267px;
border-radius: 5px;
background: rgb(135, 135, 135);
border: 2px rgb(135, 135, 135);
cursor:pointer; /* This can hit the user to close it */
}
.button-x .x-button {
margin-top: 1px;
margin-left: -1px;
color: white;
font-size: 14px;
font-family: 'Insaniburger';
text-transform: none;
}
<script src="https://kit.fontawesome.com/b99e675b6e.js"></script>
<div class="al-login">
<button class="button-x" onclick="eliminarDiv()"><span class="x-button">X</span></button>
<!--although it works in some case, do not use p inside button, also, you can just write what you want in a button-->
<p style="line-height: 0px; margin-top: 10px;">Dear user, you can login</p>
<br style="line-height: 0px;">
</div>
Please remember that you should add a point before the class.
Also, use span instead of p in a button, though it works in some case.
The last thing I change is that I add cursor:pointer; to your code, so users can know that this could be closed(because some user think default cursor is not available to click, such as me)

On Hover .li-hover not showing .sub-cat-1

On Over on the .li-hover it suppose to show a .sub-cat-1 which it is not showing. I tried several ways to make it displayed but it is not simple not showing anything in and according to css property a white box should be displayed.
Tried this html CSS
categ-list
{
width: 400px;
height: 755px;
padding: 10px 0;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 10px;
padding-left: 0px;
}
.li-hover i
{
float: right;
margin-right: 25px;
}
.li-hover
{
list-style: none;
position: relative;
display: block;
padding: 7px 0px 7px 21px;
max-height: 38px;
min-height: 21px;
}
.li-hover a
{
text-decoration: none;
color: #646464;
font-family: 'Roboto', sans-serif;
font-size: 14px;
}
.li-hover a:hover
{
color: #FF6A00;
}
.li-hover:hover
{
width: 378px;
max-height: 38px;
min-height: 21px;
overflow: hidden;
text-overflow: ellipsis;
background: #fff;
-moz-box-shadow: -2px 1px 5px transparent;
-webkit-box-shadow: -2px 1px 5px transparent;
box-shadow: -2px 1px 5px #DCDEE3;
border-top-color: rgb(220, 222, 227);
border-top-style: solid;
border-top-width: 1px;
border-bottom-color: rgb(220, 222, 227);
border-bottom-style: solid;
border-bottom-width: 1px;
border-left-color: rgb(220, 222, 227);
border-left-style: solid;
border-left-width: 1px;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
background-color: white;
box-sizing: content-box;
}
.li-hover:hover i
{
color: #FF6A00;
float: right;
margin-right: 20px;
}
.li-hover-all a
{
font-family: 'Roboto', sans-serif;
font-size: 14px;
text-decoration: none;
padding-top : 10px;
padding-right : 0px;
padding-bottom : 5px;
padding-left : 21px;
}
.sc-hd-categories:hover .categ-content
{
display: block;
}
.sub-cat-1
{
width: 600px;
height: 755px;
margin-top: -2px;
margin-left: 395px;
border: 1px solid #DCDEE3;
border-top-color: rgb(220, 222, 227);
border-top-style: solid;
border-top-width: 1px;
border-right-color: rgb(220, 222, 227);
border-right-style: solid;
border-right-width: 1px;
border-bottom-color: rgb(220, 222, 227);
border-bottom-style: solid;
border-bottom-width: 1px;
border-left-color: rgb(220, 222, 227);
border-left-style: solid;
border-left-width: 1px;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
background-color: white;
position: absolute;
top: 50px;
left: 0;
margin-top: -1px;
z-index: 1;
}
.li-hover .sub-cat-1
{
display: none;
z-index: 1;
}
.categ-list .li-hover:hover .sub-cat-1
{
display: block;
position: absolute;
z-index: 1;
}
<div class="categ-list">
<ul>
<div class="li-hover">
<li>Machinery / Vehicles & Accessories<i class="fa fa-angle-right"></i>
<div class="sub-cat-1">
</div>
</li>
</div>
<div class="li-hover">
<li>Consumer Electronics / Home Appliances<i class="fa fa-angle-right"></i></li>
</div>
</ul>
</div>

The problem is that you have your .li-hover class which has an overflow: hidden property. This meanse that everything outside the specified height and width of .li-hover will be overflowing the box and will not be shown.
Your .sub-cat-1 element is trying to position itself in a bunch of ways. It has a position: absolute so it is relative to the flow of the closest relative parent. But it's the positioning with margin-left: 395px that makes this element jump all the way to the right and outside of the box of the .li-hover element.
So in conclusion. Your code actually worked, but you were hiding it from yourself.
categ-list {
width: 400px;
height: 755px;
padding: 10px 0;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 10px;
padding-left: 0px;
}
.li-hover i {
float: right;
margin-right: 25px;
}
.li-hover {
list-style: none;
position: relative;
display: block;
padding: 7px 0px 7px 21px;
max-height: 38px;
min-height: 21px;
}
.li-hover a {
text-decoration: none;
color: #646464;
font-family: 'Roboto', sans-serif;
font-size: 14px;
}
.li-hover a:hover {
color: #FF6A00;
}
.li-hover:hover {
width: 378px;
max-height: 38px;
min-height: 21px;
text-overflow: ellipsis;
background: #fff;
-moz-box-shadow: -2px 1px 5px transparent;
-webkit-box-shadow: -2px 1px 5px transparent;
box-shadow: -2px 1px 5px #DCDEE3;
border-top-color: rgb(220, 222, 227);
border-top-style: solid;
border-top-width: 1px;
border-bottom-color: rgb(220, 222, 227);
border-bottom-style: solid;
border-bottom-width: 1px;
border-left-color: rgb(220, 222, 227);
border-left-style: solid;
border-left-width: 1px;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
background-color: white;
box-sizing: content-box;
}
.li-hover:hover i {
color: #FF6A00;
float: right;
margin-right: 20px;
}
.li-hover-all a {
font-family: 'Roboto', sans-serif;
font-size: 14px;
text-decoration: none;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 5px;
padding-left: 21px;
}
.sc-hd-categories:hover .categ-content {
display: block;
}
.sub-cat-1 {
padding: 5px;
border: 1px solid #DCDEE3;
border-top-color: rgb(220, 222, 227);
border-top-style: solid;
border-top-width: 1px;
border-right-color: rgb(220, 222, 227);
border-right-style: solid;
border-right-width: 1px;
border-bottom-color: rgb(220, 222, 227);
border-bottom-style: solid;
border-bottom-width: 1px;
border-left-color: rgb(220, 222, 227);
border-left-style: solid;
border-left-width: 1px;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
left: 0;
z-index: 1;
}
.li-hover .sub-cat-1 {
display: none;
z-index: 1;
}
.li-hover:hover .sub-cat-1 {
display: block;
position: relative;
z-index: 1;
}
<div class="categ-list">
<ul>
<li class="li-hover">
Machinery
<span> / </span>
Vehicles & Accessories
<i class="fa fa-angle-right"></i>
<span class="sub-cat-1">Tools</span>
</li>
<li class="li-hover">
Consumer Electronics
<span> / </span>
Home Appliances
<i class="fa fa-angle-right"></i>
</li>
</ul>
</div>
Also, make sure that your HTML is valid. <li> elements should always be a child of either <ul> or <ol>.
This is invalid HTML:
<ul>
<div>
<li></li>
</div>
<div>
<li></li>
</div>
</ul>
This is valid HTML:
<ul>
<li></li>
<li></li>
</ul>
You also seem to use a lot of oldschool techniques, like float: right. Not that there is anything wrong with it, but nowadays we have much more powerful (and predictable) tools like Flexbox and CSS Grid to make great layouts. Just a tip for you to help you get further.

How can I include JAVASCRIPT in my CSS on my visualforce page

We have decided to track our website's analytics by the below HOTJAR snippet below. We are using Visualforce page which has CSS as Header. We would like to include this JAVASCRIPT into this CSS.
Our HOTJAR tracking Script:
<script>
(function(h,o,t,j,a,r){
h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
h._hjSettings={hjid:748410,hjsv:6};
a=o.getElementsByTagName('head')[0];
r=o.createElement('script');r.async=1;
r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
a.appendChild(r);
})(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
</script>
</head>
</html>
<apex:outputPanel layout="none">
<script>
$j = jQuery.noConflict();
$j(document).ready(function(){
$j('#portalheaderbot').hide();
});
</script>
The below code is our Header which is in CSS. We would like to include into this so that whenever someone clicks on a page, HOTJAR can track the traffic.
<apex:page cache="false" showHeader="false" contentType="text/css" controller="BSHeaderCSSCntl">
/*Uncomment this for development*/
#import url("{!URLFOR($Resource.PD_FLP360, 'style/bootstrap.css')}");
#import url("{!URLFOR($Resource.PD_FLP360, 'style/main.css')}");
/*Uncomment this before deploying to prod.*/
/* #import url("{!URLFOR($Resource.PD_FLP360, 'style/bootstrap.min.css')}");
#import url("{!URLFOR($Resource.PD_FLP360, 'style/main.min.css')}");*/
#import url("{!URLFOR($Resource.PD_FLP360, 'style/font-awesome.min.css')}");
/* Hide SFDC stock communities components */
.bPageHeader {
display: none;
}
#tabContainer {
display: none;
}
#sidebarCell {
display:none;
}
/* Override to fix display of Chatter forms. Specific targetting to override computed styles.*/
.chatterPage, .profilePage, .zen-bodyInner {
font-size: 14px;
}
.chatterPage h3, .profilePage h3, .chatterPage legend, .profilePage legend, .pollquestion{
font-size: 14px;
}
.userProfilePage .vfButtonBar a.editLink img {
padding: 0px;
}
.zen-navigation {
height: 52px !important;
}
.uploadFile {
height: 52px !important;
}
.bottomBar{
height: 49px !important;
}
.zen-data table {
-webkit-border-horizontal-spacing: 0px;
-webkit-border-vertical-spacing: 0px;
border-bottom-color: rgb(153, 153, 153);
border-bottom-style: none;
border-bottom-width: 0px;
border-collapse: collapse;
border-image-outset: 0px;
border-image-repeat: stretch;
border-image-slice: 100%;
border-image-source: none;
border-image-width: 1;
border-left-color: rgb(153, 153, 153);
border-left-style: none;
border-left-width: 0px;
border-right-color: rgb(153, 153, 153);
border-right-style: none;
border-right-width: 0px;
border-top-color: rgb(224, 224, 224);
border-top-style: solid;
border-top-width: 1px;
color: rgb(153, 153, 153);
display: table;
font-family: arial, helvetica, clean, sans-serif;
font-size: 12px;
font-style: normal;
font-variant: normal;
font-weight: normal;
line-height: normal;
table-layout: fixed;
text-align: left;
zoom: 1;
}
.feedcontainer {
max-width: 100% !important;
}
.threecolumn, .userProfilePage {
width: 100%;
}
.threecolumn .mainContent .lowerMainContent {
width: 100%;
}
.threecolumn .mainContent, .profilePage.userProfilePage .mainContent {
width: initial;
}
.threecolumn .centerContent, .userProfilePage .centerContent {
width: 72%;
}
.chatterPage .threecolumn .rightContent, .chatterPage .userProfilePage .rightContent {
display: none;
}
.userProfilePage .headerContent {
width: auto !important;
}
/* Hide default stock page title */
.bPageTitle {
display:none;
}
/* Override default background on page blocks and related lists */
.bPageBlock.brandSecondaryBrd.secondaryPalette, .bPageBlock.bEditBlock.brandSecondaryBrd {
border: 0;
background-color: transparent;
}
/* Override font size for stock pages */
.outerNoSidebar, #bodyTable {
font-size: 14px;
}
#bodyTable { /* Fix for DownlineMap rendering in FF */
table-layout: fixed;
}
/* Custom code from Custom Settings */
{!cssSettings.Custom_CSS__c}
/* Additional custom code */
/* Override heading display format */
#fl-pagetitle {
white-space: nowrap;
}
/* Override modal popup look and feel */
.modal-title {
color: rgb(218, 157, 39);
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
text-transform: uppercase;
}
.modal-content {
border-radius: 0px;
}
/* Fix bottom padding */
.panel {
/*padding: 13px 13px 13px 13px;*/
}
/* Fix header display */
#bootstrap-body {
margin-top: 100px;
}
#publishersharebutton {
background-attachment: scroll;
background-clip: border-box;
background-color: #C9920E;
background-image: none;
background-origin: padding-box;
background-position: 0% 0%;
background-repeat: repeat;
background-size: auto;
border-bottom-color: #ce9423;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
border-bottom-style: solid;
border-bottom-width: 1px;
border-collapse: collapse;
border-left-color: #ce9423;
border-left-style: none;
border-left-width: 0px;
border-right-color: #ce9423;
border-right-style: solid;
border-right-width: 1px;
border-top-color: #ce9423;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-top-style: none;
border-top-width: 0px;
box-sizing: border-box;
color: rgb(255, 255, 255);
cursor: pointer;
display: block;
float: right;
font-family: Verdana, Geneva, sans-serif;
font-size: 13px;
font-weight: 300;
line-height: 18.699979782104492px;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
outline-color: rgb(255, 255, 255);
outline-style: none;
outline-width: 0px;
padding-bottom: 6px;
padding-left: 8px;
padding-right: 8px;
padding-top: 6px;
text-align: left;
text-decoration: none solid rgb(255, 255, 255);
box-shadow: none;
-webkit-box-shadow: none;
}
.publishercontainer.defaultState #publishersharebutton:hover, .publishercontainer.defaultState #publishersharebutton:active, .publishercontainer.defaultState #publishersharebutton:focus, .publishercontainer.defaultState #publishersharebutton.onHover {
background-color: #C9920E;
background-image: -ms-linear-gradient(top,#C9920E 0,#C9920E 100%);
background-image: -moz-linear-gradient(top,#C9920E 0,#C9920E 100%);
background-image: -webkit-linear-gradient(top,#C9920E 0,#C9920E 100%);
background-image: linear-gradient(top,#C9920E 0,#C9920E 100%);
border: 1px solid #ce9423;
}
#bootstrap-body ul li {
margin-left: 0px;
}
#bootstrap-body .site-title { // Override site title for Chatter page
box-sizing: border-box;
color: rgb(255, 255, 255);
display: inline;
font-family: 'Helvetica Neue', Helvetca, Arial, sans-serif;
font-size: 49px;
font-weight: bold;
height: auto;
letter-spacing: -1px;
line-height: 53.900001525878906px;
margin-bottom: 10px;
margin-left: 0px;
margin-right: 0px;
margin-top: 20px;
padding-bottom: 60px;
padding-left: 0px;
padding-right: 0px;
padding-top: 40px;
text-shadow: rgb(34, 34, 34) 2px 2px 5px;
width: auto;
}
/* Hide dropdown box on right hand side of Chatter */
#moderatorMutton{
display: none;
}
/* Text wrapping for long names */
#profile-name {
word-wrap: break-word;
}
/* Hide contentWrapper as this interferes with min page width */
#contentWrapper, .zen-page {
display: none;
}
#site-header{
padding-top: 35px;
}
/* Override size of list view so that it renders correctly on small screens */
.listBody, .x-grid3, .x-grid-panel, .x-panel-body-noheader, .x-grid3-scroller {
min-height: 300px;
}
/* Widget header */
.panel-heading span.wdgHeader {
display: table;
}
#fchArea{
overflow: scroll;
height: 800px;
}
<!-- Hotjar Tracking Code for www.foreverliving.com -->
</apex:page>

You cannot include JS from CSS. The only thing you can do is to declare some kind of background image or alike, which creates a request to the tracker, like:
body:after {
content: '';
background-image: url(/path/to/tracker);
width: 1px;
height: 1px;
position: absolute;
left: -1px;
top: -1px;
display: block;
}
But be aware that css will be cached, so you probably need a url like:
/path/to/tracker?t=<timestamp>
Whereby the timestamp needs to be generated on each page request.

footer button in Android Browser

I am new to CSS and developing a simple template which will be showed inside an Android Browser. Basically my template only has two elements, an error message, and a button (should be placed at footer).
I have read a few posts at stackoverflow. People suggest to use
position:fixed;
bottom: 0;
to place an element at footer. However, when I added this my button css, it seems my button was just placed right below the error message instead of at the footer. Anyone has any ideas why?
.fulfill-application-button{
display: inline-block;
width: 100%;
zoom: 1;
margin: 0;
text-align: center;
cursor: pointer;
border: 1px solid #bbb;
overflow: visible;
font: bold 25px arial, helvetica, sans-serif;
text-decoration: none;
white-space: nowrap;
color: #555;
background-color: #ddd;
transition: background-color .2s ease-out;
background-clip: padding-box;
border-radius: 3px;
box-shadow: 0 1px 0 rgba(0, 0, 0, .3),
0 2px 2px -1px rgba(0, 0, 0, .5),
0 1px 0 rgba(255, 255, 255, .3) inset;
text-shadow: 0 1px 0 rgba(255,255,255, .9);
}
.fulfill-application-button:hover{
background-color: #eee;
color: #555;
}
.fulfill-application-button:active{
background: #e9e9e9;
position: relative;
top: 1px;
text-shadow: none;
box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset;
}
.fulfill-application-button.color{
color: #fff;
text-shadow: 0 1px 0 rgba(0,0,0,.2);
}
.fulfill-application-button.ok{
position: relative;
bottom: 0;
padding: 10px 90px;
background-color: #c43c35;
border-color: #c43c35;
}
.fulfill-application-button.ok:hover{
background-color: #ee5f5b;
}
.fulfill-application-button.ok:active{
background: #c43c35;
}
html,body
{
padding: 15px;
height: 100%;
background-color: black;
}
div.error-message{
color: white;
line-height: 120%;
padding-top: 20%;
font-size:30px;
}
</style>
<body>
<div class ="error-message">
${error}
</div>
<button id="ok" type="button" class="color ok fulfill-application-button">
OK
</button>
</body>

Change position: relative; to position: fixed; from class .fulfill-application-button.ok
Code :
.fulfill-application-button.ok{
position: fixed;
bottom: 0;
padding: 10px 90px;
background-color: #c43c35;
border-color: #c43c35;
}
Note : You can give right and left for the same, if you want.

Pasting into contentedittable results in random tag insertion

I am using a contentedittable field as user input so that I can exploit text formatting. Unfortunately I have found that when a user pastes into the field a massive amound of unnessessary html comes with it. I only want the plain text from the clipboard.
Why is this happening?!
A Truncated Example:
<div><br></div><div><span class="Apple-style-span" style="font-family: Arial, 'Liberation Sans', 'DejaVu Sans', sans-serif; font-size: 13px; line-height: 12px; color: rgb(0, 0, 0); "><table style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; font-size: 13px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-collapse: collapse; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; background-position: initial initial; background-repeat: initial initial; "><tbody style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; font-size: 13px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; background-position: initial initial; background-repeat: initial initial; "><tr style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; font-size: 13px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; background-position: initial initial; background-repeat: initial initial; "><td class="votecell" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; font-size: 13px; vertical-align: top; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; width: 60px; background-position: initial initial; background-repeat: initial initial; "><div class="vote" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; font-size: 13px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; text-align: center; background-position: initial initial; background-repeat: initial initial; "><span class="vote-count-post" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; font-size: 31px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; display: block; color: rgb(128, 129, 133); font-weight: bold; background-position: initial initial; background-repeat: initial initial; ">1</span><a class="vote-down-off" title="This question does not show any research effort; it is unclear or not useful (click again to undo)" style="margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; font-size: 1px; vertical-align: baseline; background-image: url(http://sstatic.net/stackoverflow/img/sprites.png?v=3); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; color: rgb(0, 119, 204); text-decoration: none; cursor: pointer; overflow-x: hidden; overflow-y: hidden; display: block; width: 41px; height: 25px; text-indent: -9999em; background-position: 0px -300px; background-repeat: no-repeat no-repeat; ">...

You can only get the plain text using a hack. Recent versions of both TinyMCE and CKEditor use this technique on their iframe-based editors:
Detect a Ctrl-v / Shift-Insert event using a keypress event handler
In that handler, save the current user selection, add a textarea element off-screen (say at left -1000px) to the document, turn contentEditable off and call focus() on the textarea, thus moving the caret and effectively redirecting the paste
Set a very brief timer (say 1 millisecond) in the event handler to call another function that stores the textarea value, removes the textarea from the document, turns contentEditable back on, restores the user selection and pastes the text in.
Note that this will only work for keyboard paste events and not pastes from the context or edit menus. The paste event would be better but by the time it fires, it's too late to redirect the caret into the textarea in most browsers.

You're getting all that extra nonsense because a contenteditable element supports the text/html MIME type. When you paste something from the clipboard, there is often a content negotiation phase:
The paste target says "I support these content types: ...."
The clipboard manager then discusses that list with the data source to get the pasted data in a suitable format for the paste target.
And finally, the data gets dumped in your contenteditable element as text/html with all that extra noise.
The process may not be exactly like the above but it will be similar. Your best bet would probably to add a handler for the paste event and use that handler to convert the pasted data to text/plain.