javascript - 单击按钮时删除划线并转到下面的行

Question

1. 每次您点击“添加成绩”按钮时，我都希望接下来的内容显示在该行下方。

2. 当我点击“-”按钮时，我希望删除该行中的所有内容。

delete nextline只需尝试下面的代码，您就会明白我在说什么。

input[type="number"]{
    color : transparent;
    text-shadow : 0 0 0 #000;
}
input[type="number"]:focus{
    outline : none;
}
</style>
<button type="button" id="dugme1" onclick="javascript:dodajocenu();"> Add grade</button>
<br><br>
<div id="stranica">
</div>

<script>
  var ocena = 0;

  function removeElement(obrisi) {
    var dugme = obrisi.target;
    var input = dugme.previousSibling;
    var brisi = dugme.parentElement;
    brisi.removeChild(dugme);
    brisi.removeChild(input);
  }

  function dodajocenu() {
    ocena++;

    //create textbox
    var input = document.createElement('input');
    input.type = "number";
    input.setAttribute("max",5);
    input.setAttribute("min",1);

var myParent = document.body;

//Create array of options to be added
var array = ["Volvo","Saab","Mercades","Audi"];

//Create and append select list
var selectList = document.createElement('select');
selectList.id = "mySelect";
myParent.appendChild(selectList);

//Create and append the options
for (var i = 0; i < array.length; i++) {
    var option = document.createElement('option');
    option.value = array[i];
    option.text = array[i];
    selectList.appendChild(option);
}   

    //create remove button
    var remove = document.createElement('button');
    remove.onclick = function(obrisiocenu) {
      removeElement(obrisiocenu);
    }
    remove.setAttribute("type", "dugme");
    remove.innerHTML = "-";

    stranica.appendChild(input);
    stranica.appendChild(selectList);
    stranica.appendChild(remove);

  }

</script>```

Answer 1

尝试运行以下代码，让我知道这是否是您想要执行的操作。

var ocena = 0;

var stranica = document.querySelector("#stranica")

function removeElement(obrisi) {
  var dugme = obrisi.target;
  stranica.removeChild(dugme.parentElement)
}

function dodajocenu() {
  ocena++;

  //create textbox
  var input = document.createElement('input');
  input.type = "number";
  input.setAttribute("max",5);
  input.setAttribute("min",1);

  var myParent = document.body;

  //Create array of options to be added
  var array = ["Volvo","Saab","Mercades","Audi"];

  //Create and append select list
  var selectList = document.createElement('select');
  selectList.id = "mySelect";
  myParent.appendChild(selectList);

  //Create and append the options
  for (var i = 0; i < array.length; i++) {
    var option = document.createElement('option');
    option.value = array[i];
    option.text = array[i];
    selectList.appendChild(option);
  }   

  //create remove button
  var remove = document.createElement('button');
  remove.onclick = function(obrisiocenu) {
    removeElement(obrisiocenu);
  }
  remove.setAttribute("type", "dugme");
  remove.innerHTML = "-";
  
  var item = document.createElement('div')
  item.classList.add("item")
  
  item.appendChild(input);
  item.appendChild(selectList);
  item.appendChild(remove);
  
  stranica.appendChild(item)

}

input[type="number"]{
    color : transparent;
    text-shadow : 0 0 0 #000;
}
input[type="number"]:focus{
    outline : none;
}

<button type="button" id="dugme1" onclick="javascript:dodajocenu();"> Add grade</button>
<br><br>
<div id="stranica">
</div>