[JavaScript][PHP]Powielanie inputa file + usuwanie, jw Opcje

[miras]

Witam, mam kod, który po naciśnięciu buttona dodaje mi nowy element <input type="file"/> - wszystko gra i jest ok, natomiast potrzebuję dodać do tego jeszcze opcję "usuń" chodzi mi o usuwanie tego dodanego inputa jeżeli ktoś doda go przez pomyłkę..

[HTML] pobierz, plaintext 
	 <script type="text/javascript">	
		function dodaj_element(kontener){
			var znacznik = document.createElement('input');
			znacznik.setAttribute('type', 'file');
			znacznik.setAttribute('name', 'file[]');
			znacznik.className = 'upload';
			var kontener = document.getElementById(kontener);
			kontener.appendChild(znacznik);
		}
	</script>
 
<input type="button" value="Załącz plik" onclick="dodaj_element('pliki');" />
 
[HTML] pobierz, plaintext 

Ten post edytował miras 10.03.2015, 20:21:00

[com]

http://stackoverflow.com/questions/3387427...e-element-by-id

[miras]

[PHP] pobierz, plaintext 
function domRemove(id) {
    var elem = document.getElementById(id);
    domPurge(elem);
    return elem.parentNode.removeChild(elem);
}
[PHP] pobierz, plaintext 

rozumiem, że ta funkcja odpowiada za usuwanie niechcianych inputów, ale przecież przy każdym inpucie trzeba jeszcze jakoś generować przycisk, po naciśnięciu którego input zniknie, jakiś pomysł?

[trueblue]

Utwórz <div> w nim <input> i przycisk do usuwania. Cały <div> doklej za ostatni <div>. Dodaj przyciskowi zdarzenie, w którym pobierzesz rodzica przycisku (<div>) i usuniesz go.

[miras]

Czyli mam zrobić coś takiego: i powielać to?

[HTML] pobierz, plaintext 
<div class="inputy">
    <input type="file" name="test"/>
   <button id="usun">Usuń</button>
</div>
[HTML] pobierz, plaintext 

trochę nie łapie :/

[trueblue]

id musi być unikalne.
Tak, a na akcję kliknięcia <button> usuwasz jego rodzica, czyli <div.inputy>

[miras]

Ok, jeszcze pytanko z tym id unikalnym, <button id="usun[]">usun</button> coś takiego wypali?

[trueblue]

id nie może zawierać nawiasów, a nawet jakby, nadal nie byłoby unikalne.
Dodawaj tam po prostu usun+kolejny numer, a kolejny numer to będzie liczba dodanych już <div.inputy> +1.

EDIT: Po co Ci id w buttonie?

Ten post edytował trueblue 23.03.2015, 18:09:36

[miras]

żeby wiedzieć, który div mam usunąć..

[trueblue]

Zawsze rodzica <button>, id jest tu niepotrzebne.
http://jsfiddle.net/cf3pzoad/

[miras]

a mógłbyś mi jeszcze podpowiedzieć jak ten kod - poprawić, żeby tworzył, a nie powielał tą klasę input a w niej type="file" i button do usuwania?

[XML] pobierz, plaintext 
		function dodaj_element(kontener){
			var znacznik = document.createElement('input');
			znacznik.setAttribute('type', 'file');
			znacznik.setAttribute('name', 'file[]');
			znacznik.className = 'upload';
			var kontener = document.getElementById(kontener);
			kontener.appendChild(znacznik);
		}
[XML] pobierz, plaintext 

[trueblue]

Nie rozumiem.
Chcesz żeby tworzył <div.inputy> z elementami w środku?

[miras]

tak, wcześniejszy nasz zamysł był taki, żeby utworzyć

[PHP] pobierz, plaintext 
<div class="inputy">
    <input type="file" name="test"/>
   <button>Usuń</button>
</div>
[PHP] pobierz, plaintext 

a potem to powielać, a ja bym wolał, żeby tego nie powielać tylko tworzyć po prostu w js, nie wiem czy nie wymyślam za dużo, ale po prostu będę miał o wiele mniej roboty jak nie będzie trzeba robić powielania (nie pytajcie dlaczego (IMG:style_emoticons/default/smile.gif) )

[trueblue]

Nie wiem dokładnie co masz na myśli.
http://jsfiddle.net/kr2yy968/

[miras]

Tak, dokładnie o to mi chodziło, tylko jest teraz problem z usuwaniem - nie usuwa rekordów a po kliknięciu "usuń" przeładowuje się strona..

[XML] pobierz, plaintext 
 
$(document).ready(function(){
    $('div.inputy button').click(function(e){
        $(this).parent().remove();
    });
});
function dodaj_element(kontener) {
    var div = document.createElement('div');
    div.setAttribute('class', 'inputy');
    var znacznik = document.createElement('input');
    znacznik.setAttribute('type', 'file');
    znacznik.setAttribute('name', 'file[]');
    znacznik.className = 'upload';
    div.appendChild(znacznik);
    var znacznik = document.createElement('button');
    znacznik.innerHTML='usuń';
    div.appendChild(znacznik);
    var kontener = document.getElementById(kontener);
    kontener.appendChild(div);
}
document.getElementById('dodaj').addEventListener('click', function (e) {
    e.preventDefault();
    dodaj_element('kontener');
});
 
[XML] pobierz, plaintext 

[trueblue]

Kod, który podałem dotyczy usuwania istniejących elementów, a nie dodawanych dynamicznie.

http://jsfiddle.net/kr2yy968/1/

P.S. Polecam Ci zapoznanie się z jQuery.