Блог

Главная - Вопросы по программированию - Опция удаления не работает в javascript createelement?

Опция удаления не работает в javascript createelement?

#javascript #html

#javascript #HTML

Вопрос:

   document.getElementById("add_image").onclick=function (ev) {

    var image=document.getElementById("images");

    var preview=document.createElement("img");
    preview.style.width="auto";
    preview.style.height="100px";


    var newInput=document.createElement("input");
    newInput.type="file";
    newInput.name="file[]";
    var delbutton = document.createElement("button")
    delbutton.appendChild(document.createTextNode("delete"));


    var br=document.createElement("br");
    var br1=document.createElement("br");

    newInput.onchange=function (ev1) {
      if(this.files amp;amp; this.files[0]){
          var fileReader=new FileReader();
          fileReader.onload=function (ev2) {
              preview.src=ev2.target.result;
          };

          fileReader.readAsDataURL(this.files[0])
      }
    };

    image.appendChild(preview);
    image.appendChild(delbutton);
    image.appendChild(newInput);
    image.appendChild(br);
    image.appendChild(br1);

  }



   
 <div>
  <h1>Add Product</h1>
  <input type="text"><br><br>
        <div id="images">
          <input type="file" name="file[]"><br><br>
        </div>
        <button type="button" id="add_image"> Add Image</button><br><br>

</div>

Здесь пользователь будет загружать изображения, сколько они хотят и когда им нужно. Если они не нужны, и нажмите кнопку удаления, чтобы последний файл только удалялся. Мне нужно удалять последнее поле fileinput всякий раз, когда я нажимаю кнопку удаления. Я пока не включаю это.

Комментарии:

1. «Опция удаления не работает …» — Потому что ваш скрипт даже не пытается что-либо удалить… -> Что вы пробовали до сих пор, чтобы решить это самостоятельно?

2. var btn = document.createElement("button"); var t = document.createTextNode("Delete"); btn.appendChild(t); btn.onclick = function(){myFunction(myparameter)}; document.getElementById("add_image").removeChild(btn); Это я пробовал.

Ответ №1:

Вы должны использовать addEventListener метод on delButton и прослушивать click событие, чтобы при нажатии кнопки вы могли удалить delbutton (являющийся целевым элементом, на который нажимается), preview (предыдущий элемент-побратим delButton) и newInput (следующий элемент-побратим delButton) с помощью .remove() метода. просто используйте .remove() метод для любого элемента, который вы хотите удалить, при запуске события click на delButton.

Возможно, вам захочется узнать больше о прослушивателях событий J avaScript.

Ниже приведен пример:

 document.getElementById("add_image").onclick=function (ev) {

    var image=document.getElementById("images");

    var preview=document.createElement("img");
    preview.style.width="auto";
    preview.style.height="100px";


    var newInput=document.createElement("input");
    newInput.type="file";
    newInput.name="file[]";
    var delbutton = document.createElement("button")
    delbutton.appendChild(document.createTextNode("delete"));


    var br=document.createElement("br");
    var br1=document.createElement("br");

    newInput.onchange=function (ev1) {
      if(this.files amp;amp; this.files[0]){
          var fileReader=new FileReader();
          fileReader.onload=function (ev2) {
              preview.src=ev2.target.result;
          };

          fileReader.readAsDataURL(this.files[0])
      }
    };

    image.appendChild(preview);
    image.appendChild(delbutton);
    image.appendChild(newInput);
    image.appendChild(br);
    image.appendChild(br1);
    
 //Follow is the answer
delbutton.addEventListener("click", function(event) {
    event.target.previousSibling.remove();
    event.target.nextSibling.remove();
    event.target.remove();
});

 }
 
   
 <div>
  <h1>Add Product</h1>
  <input type="text"><br><br>
        <div id="images">
          <input type="file" name="file[]"><br><br>
        </div>
        <button type="button" id="add_image"> Add Image</button><br><br>

</div>

Метки: