Javascript - removeChild verwijdert een hele cel van een tabel

Ik heb een tabel waar ik nieuwe rijen met invoervelden kan toevoegen. Ook is er een mogelijkheid om een ​​toegevoegd invoerveld te verwijderen. Het verwijderen van een volledige rij werkt, maar er is een probleem met het verwijderen van afzonderlijke invoervelden in een cel. Hier is de code:

cell1=document.getElementById('avz_tabelle').rows[par.rowIndex].cells;

var feld = document.createElement("input"); 
feld.setAttribute("name","avz_keywords" + avz_array + "[]"); 
feld.setAttribute("onblur","");
feld.setAttribute("type","text"); 
feld.setAttribute("size","30"); 
cell1[1].appendChild(feld);

var remove = document.createElement("a");
remove.setAttribute("href","#");
remove.setAttribute("onclick","this.parentNode.parentNode.removeChild(this.parentNode);");
remove.innerHTML = " X";
cell1[1].appendChild(remove);
var br = document.createElement("br");
cell1[1].appendChild(br);

Het probleem is dat de verwijderactie de volledige cel volledig verwijdert, in plaats van het gerelateerde invoerveld. Het vreemde is dat dit zonder problemen op de eerste laag van de tafel werkt. Zie je de fout? Bedankt voor alle suggesties!

1

2 antwoord

Ok, u voegt het ankerelement verwijderen toe aan cel1 [1] , wat een enkele tabelcel is van de rij met index par.rowIndex . Dus de parentNode van het ankerelement is de cel. Met this.parentNode.parentNode.removeChild (this.parentNode) verwijdert u de parentNode van het anker, wat de cel is.

EDIT: een zin verwijderd die misschien aanstootgevend was ... sorry :-)

EDIT2: Mogelijke oplossing:

this.previousSibling.parentNode.removeChild(this.previousSibling);

omdat this.previousSibling mogelijk het invoerelement is

1
toegevoegd
Nee, dat was niet aanstootgevend, maak je geen zorgen :-) Ja, de oplossing met this.previousSibling werkt, maar het verwijdert de "X" -button niet. Maar bedankt, dit antwoord brengt me een stap verder.
toegevoegd de auteur Crayl, de bron

Omdat u uw HTML bouwt met de DOM, hoeft u geen attributen in te stellen voor evenementen:

vervang remove.setAttribute ("onclick" ... door iets als:

remove.onclick = function(ev){
  feld.parentNode.removeChild(feld);
}

feld and the onclick function are defined in the same scope, you have a closure here. It makes feld available inside the function.

1
toegevoegd
Dit is een sexy oplossing, heel erg bedankt! Als ik add.innerHTML = "" toevoeg; in de functie werkt het perfect. Woohoo.
toegevoegd de auteur Crayl, de bron
@Crayl, het is niet sexy, het is een manier om een ​​korte code op te schonen.
toegevoegd de auteur Mic, de bron