CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

default Nybegynder

21. marts 2009 - 16:21 Der er 15 kommentarer og
1 løsning

Slette fra divs fra en div

Hej

Jeg står og skal brug et script til at kunne slette divs fra en div. den skal slette fra nedaf og op. Det bliver højstsandlynligt bygget ind et script jeg har hvor den opdatere hver 5 min. Ellers bliver det bygge ind i et system hvor den sletter 1 af de divs når man klikker på et link

eksempel.
<div id="beskeder">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>

Synes godt om

fant0mas Nybegynder

21. marts 2009 - 17:34 #1

Sådan:
<script type="text/javascript">
function removeNode(id) {
var hest = document.getElementById('beskeder');
var pony = hest.getElementsByTagName('div');
hest.removeChild(pony[id]);
}
</script>
<body>
<div id="beskeder">
<div>1</div>
<div>2</div>
<div>3</div>
<div>5</div>
<div>6</div>
<div>8</div>
<div>0</div>
</div>
<span onclick="removeNode(0)">hest</span>
</body>

Synes godt om

default Nybegynder

21. marts 2009 - 17:39 #2

Kan den lave omvendt, så den sletter den nederste først?

Synes godt om

fant0mas Nybegynder

21. marts 2009 - 17:40 #3

Og sådan hvis du hver gang du trykker vil slette det sidste element:

hest.removeChild(pony[pony.length-1]);

Synes godt om

default Nybegynder

21. marts 2009 - 17:44 #4

Tak mange gange, ligger du et svar? :)

Synes godt om

fant0mas Nybegynder

21. marts 2009 - 17:55 #5

Ellers tak svar selv.

For lige at spare dig for problemer, ville jeg smide det i en liste i stedet, så kan du 'neste' med alle de div's du ønsker.

<script type="text/javascript">
function removeNode() {
var hest = document.getElementById('beskeder');
var pony = hest.getElementsByTagName('li');
if(pony.length){
hest.removeChild(pony[pony.length-1]);
}
}
</script>
<style>
#beskeder{
padding: 0px;
}
#beskeder li{
list-style-type: none;
}
</style>
<body>
<ul id="beskeder">
<li>pony<div>pony</div></li>
<li>pony</li>
<li>pony</li>
<li>pony</li>
</ul>
<span onclick="removeNode()">hest</span>
</body>

Synes godt om

default Nybegynder

21. marts 2009 - 18:13 #6

Ved du hvordan man får et tal på hvor mange divs der er i en http.responseText fra et ajax script?

Synes godt om

default Nybegynder

21. marts 2009 - 18:40 #7

evt.. hvad er fejlen i den her?

var hent = document.getElementById('beskeder');
var tagget = hent.getElementsByTagName('div');
if(http.responseText.length != 0) {
var div = http.responseText.getElementsByTagName('div');
hent.removeChild(tagget[tagget.length-div.length]);
}

Synes godt om

tjens Nybegynder

22. marts 2009 - 11:43 #8

#6 http.responseXML i stedet for responseText giver dig mulighed for getElementsByTagName

#7 Din removeChild fjerner kun 1 gammel div.
Brug derfor fant0mas forslag i #3 som altid fjernet den sidste, og kør den flere gange, hvis der er flere nye nyheder i svaret.

Det næste problem er at få de nye nyheder præsenteret på skærmen.
Svaret fra XMLHttpRequest er et XML-DOM objekt, og kan ikke fremvises direkte (uden at bruge fyfy metoden innerHTML).

Derfor må der skrives en rutine der konvererer til HTML-DOM.

Jeg har lavet en demo som kan ses i brug her
http://tjens.dk/javascript/examples/readXMLnewsDivs/

hvor knappen tilfører 5 nye nyheder fra xmlfilen her
http://tjens.dk/javascript/examples/readXMLnewsDivs/nextNews.xml

Fuld source:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>TestReadXMLnewsDivs</title>
<script type="text/javascript">
var xmlhttp;

function refreshNews()
{
if (window.XMLHttpRequest) { // code for Mozilla, Safari, ** And Now IE 7 **, etc
xmlhttp=new XMLHttpRequest();
} else if (window.ActiveXObject) { //IE
xmlhttp=new ActiveXObject('Microsoft.XMLHTTP');
}
if (typeof(xmlhttp)=='object') {
xmlhttp.onreadystatechange=FileReady;
xmlhttp.open("GET", "nextNews.xml", true);
xmlhttp.send(null);
}

}
function FileReady() {
if (xmlhttp.readyState==4) {
if (xmlhttp.status==200) {
// alert("File ready: " + xmlhttp.responseText);
updateNewsDiv(xmlhttp.responseXML);
}
else {
alert("Read News ERROR: " + xmlhttp.statusText);
}
}
}

function updateNewsDiv(data)
{
var newDivs = data.getElementsByTagName('div');
var newsContainer = document.getElementById("newscontainer");
for (var i = 0; i < newDivs.length; i++) { // for each new DIV element
OldNewsDivs= newsContainer.getElementsByTagName('div');
newsContainer.removeChild(OldNewsDivs[OldNewsDivs.length-1]);
newsContainer.insertBefore( convertXMLtoDOM(newDivs[i]), OldNewsDivs[0]);
}
}

function convertXMLtoDOM(inputTree) {
// the xml-file input must be converted from XML-DOM (textf ormat) to HTML-DOM (browser format)

var DOMelem = document.createElement(inputTree.nodeName);
for (var i = 0; i < inputTree.childNodes.length; i++) {
switch (inputTree.childNodes[i].nodeType) {
case 1:
DOMelem.appendChild(convertXMLtoDOM(inputTree.childNodes[i] ) );
break;
case 3:
if (inputTree.childNodes[i].nodeValue > ' ') // this if skips whitespace in some browsers
DOMelem.appendChild(document.createTextNode( inputTree.childNodes[i].nodeValue )) ;
break;
}
}
return DOMelem;
}

</script>
</head>
<body>
<p><input type="button" value="Refresh news" onclick="refreshNews(); return false" ></p>
<div id="newscontainer" >
<div>
<h4>Newsheading 19</h4>
<p>19 19 19</p>
</div>
<div>
<h4>Newsheading 18</h4>
<p>18 18 18</p>
</div>
<div>
<h4>Newsheading 17</h4>
<p>17 17 17</p>
</div>
<div>
<h4>Newsheading 16</h4>
<p>16 16 16</p>
</div>
<div>
<h4>Newsheading 15</h4>
<p>15 15 15 </p>
</div>
<div>
<h4>Newsheading 14</h4>
<p>14 14 14</p>
</div>
<div>
<h4>Newsheading 13</h4>
<p>13 13 13</p>
</div>
<div>
<h4>Newsheading 12</h4>
<p>12 12 12</p>
</div>
<div>
<h4>Newsheading 11</h4>
<p>11 11 11</p>
</div>
<div>
<h4>Newsheading 10</h4>
<p>10 10 10</p>
</div>
</div>
</body></html>

Synes godt om

olebole Juniormester

23. marts 2009 - 09:37 #9

<ole>

Man HTML-formaterer ikke data i forbindelse med Ajax - det kræver dramatisk flere resourcer end at formatere dem som JSON eller XML.
På klienten bruges så DOM til at oprette/klone elementer og indsætte dem i sidens DOM-træ. Du kan se et eksempel i tråden her:
http://www.eksperten.dk/spm/868810#reply_7353646

Slette det første element i et andet:
ELEMENT.removeChild(ELEMENT.firstChild);

Slette det sidste element i et andet:
ELEMENT.removeChild(ELEMENT.lastChild);

/mvh
</bole>

Synes godt om

olebole Juniormester

23. marts 2009 - 09:38 #10

"Man HTML-formaterer ikke data på serveren i forbindelse med Ajax" ;o)

Synes godt om

tjens Nybegynder

23. marts 2009 - 10:43 #11

Helt enig med olebole.

Mit eksempel i #8 modtager netop XML og danner DOM-elementer med dataindhold fra XML.

Og tak for tip om firstChild og lastChild: Det er nemmere at læse end det length-1 og index[0] jeg brugte.

Synes godt om

olebole Juniormester

23. marts 2009 - 11:26 #12

Selvtak ... og så lige den sidste, der sletter alle ;o)
while(ELEMENT.firstChild) ELEMENT.removeChild(ELEMENT.firstChild);

Synes godt om

default Nybegynder

24. august 2009 - 18:43 #13

Nogle der skulle have points?

Synes godt om

olebole Juniormester

24. august 2009 - 20:50 #14

Det er dig, der ved det

Synes godt om

default Nybegynder

24. august 2009 - 20:56 #15

Smid et ole.. Kan ikke huske hvordan dette endte.

Synes godt om

olebole Juniormester

24. august 2009 - 21:03 #16

Kommer her

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Flere spørgsmål fra JavaScript kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Disable button efter 1. klik Af nemlig i JavaScript	2	05/05/202415:37	05/05/202416:25
Beregning af sum via PHP og SQL Af dane022 i JavaScript	3	10/02/202421:38	12/02/202409:41
Kode der tjekker telefonnummer i formular Af Asky i JavaScript	2	27/12/202321:42	28/12/202314:41
Nogle af mine formularer i PHP er plaget af spam Af Asky i JavaScript	12	19/12/202313:31	10/01/202411:04
Vis data fra en anden fil i en div Af EveryMA i JavaScript	2	19/10/202307:02	20/10/202307:02

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS