Как через this удалять файл в нужном input'е?

571

24 ноября 2016, 09:53

var file = document.getElementById('file'), 
            removeBtn = document.getElementById('remove'); 
 
        removeBtn.addEventListener('click', function() { 
            file.value = ''; 
        }, false);

<input type="file" id="file"/> <br /> 
<input type="button" id="remove" value="remove" /> 
<br /> 
<br /> 
<input type="file" id="file"/> <br /> 
<input type="button" id="remove" value="remove" /> 
<br /> 
<br /> 
<input type="file" id="file"/> <br /> 
<input type="button" id="remove" value="remove" /> 
<br /> 
<br />

как правильно изменить скрипт, чтобы можно было удалять только тот файл, под которым находиться кнопка удалить?

Answer 1

Во-первых, нельзя на одной странице иметь двух одинаковых id. Во-вторых, стоит изменить вёрстку так, чтобы поле и кнопку что-то объединяло. Например, общий родительский элемент.

var removeButtons = document.getElementsByClassName('remove'); 
for(var i = 0; i < removeButtons.length; i++) 
    removeButtons[i].addEventListener('click', function(event) { 
        var parent = event.target.parentNode; 
        for(var x = 0; x < parent.childNodes.length; x++) { 
            if(parent.childNodes[x].nodeName == 'INPUT' && parent.childNodes[x].type == 'file') 
                parent.childNodes[x].value = ''; 
        } 
    });

<p> 
    <input type="file" /> <br /> 
    <input type="button" class="remove" value="remove" /> 
</p> 
<p> 
    <input type="file" /> <br /> 
    <input type="button" class="remove" value="remove" /> 
</p> 
<p> 
    <input type="file" /> <br /> 
    <input type="button" class="remove" value="remove" /> 
</p>

Если бы взаимодействующие инпуты были написаны подряд, без тегов и текста между ними, можно бы было ещё проще с помощью атрибута previousSibling:

event.target.previousSibling.value = '';

И напоследок ещё одно важное замечание: система безопасности браузера может не позволить изменять значение в поле типа file. Так что лучше и не пытаться.