<style>
.item {border-bottom:1px solid gray;color:black}
.deleted {color:red;}
.button {border: 1px solid black; padding: 5px 5px;cursor:pointer;color:blue;background-color:brown}
#myList {
height:250px;
overflow:auto;
margin: 0px 20px 20px 0px;
border-bottom: 1px dotted gray;
}
</style>
<div id="myList">
<div class="item" ondblclick="removeMe(this);">
ID 1 - Value 1 - Value 2 - Value 3
</div>
<div class="item" ondblclick="removeMe(this);">
ID 2 - Value 1 - Value 2 - Value 3
</div>
</div>
<span onclick="addToList();" class="button">[+] ADD</span>
<br />
[x] double click to remove row!<br />
[x] auto scroll after appendChild
<br /><input type="checkbox" id="delController" value="1" checked /> Really Remove
<script>
function addToList() {
var item = document.createElement('div');
item.innerHTML = new Date();
item.className = 'item';
item.ondblclick = function() {removeMe(this);};
/*
.id = "div1";
.setAttribute("align","center");
.margin = "0px auto";
.className ="dynamicDiv";
*/
var list = document.getElementById('myList');
list.appendChild(item);
list.scrollTop = list.scrollHeight;
}
function removeMe(ele) {
var onlyMarkDeleted = !document.getElementById('delController').checked;
if (onlyMarkDeleted) {
if (ele.getAttribute('x') == null) {
ele.setAttribute('x', 'deleted');
ele.innerHTML = 'DELETED';
ele.className = 'item deleted';
} else {
alert('Already deleted');
}
} else {
ele.parentNode.removeChild(ele);
}
}
function killChild(parent_id, child_id) {
document.getElementById(parent_id).removeChild(document.getElementById(child_id));
}
</script>
Title:
Simple Add, remove div element, auto scroll
Description:
<style> .item {border-bottom:1px solid gray;color:black} .deleted {color:red;} .button {border: 1px solid black; padding: 5px 5px;curs...
...
Rating:
4