将鼠标悬停在数组元素上并为数组元素赋值时显示滑块

Question

我已经完成了从文本框输入数组元素时必须生成数组元素的部分，我现在努力的是在悬停在每个数组元素上时显示一个滑块并给数组元素一个值，这也是我挣扎的是单独删除每个生成的数组元素，我的删除函数会在单击时删除整个数组，而不仅仅是我单击的单个元素。

它应该是这样的： enter image description here

到目前为止，这是我的代码：

let names   = [];
    let nameInput   = document.getElementById("name");
    let messageBox  = document.getElementById("display");

    function insert ( ) {
     names.push( nameInput.value );
     clearAndShow();
     
    }

    function remove()
    {
     
      var element = document.getElementById("display");
      element.parentNode.removeChild(element);


    }



    function clearAndShow () {    
      let printd=""  
      nameInput.value = "";
      messageBox.innerHTML = "";
      names.forEach(function(element){
        if(element != ''){
         
            var _span = document.createElement('span');
           
                 _span.style.borderStyle = "solid"
                 _span.style.borderColor = "blue"
                 _span.style.width = '50px'
                 _span.style.marginLeft = "5px"
           
            _span.appendChild(document.createTextNode(element))
             messageBox.appendChild(_span)

           printd +="''"  + element +  "''" + ","  + " ";
  
            document.getElementById("labelprint").innerHTML=(printd)

        }  
      })
    }

h3 {
  color: rgb(0, 174, 255);
}

.container {
  border: solid 2px;
  display: block;
  margin-left: 200px;
  margin-right: 200px;
  margin-top: 50px;
}

<div class="container">
   <form>
      <h1>Enter Search</h1>
      <input id="name" type="text" />
      <input type="button" value="Search" onclick="insert()" />
   </form>
   <br/>
   <div onclick="remove(this)" id="display"></div>
   <br/>
   <label >You have Selected: </label>
   <h3 id="labelprint"></h3>
</div>

Answer 1

我不是粗鲁，我只是对你如何表达你的信息感到困惑，但我认为你的意思是这样做：

var names = [];
var nameInput = document.getElementById("name");
var messageBox = document.getElementById("display");

function insert ( ) {
    names.push( nameInput.value );
    // add value to array val: names[names.length - 1] = PutValueHere
    clearAndShow();
}

function remove(this){
    document.getElementById("display").parentNode.firstChild.remove(); // If you want it to remove the last child with the id 'display' then do .parentNode.lastChild.remove()
//if you are trying to remove the last val in the array do this: names.splice(names.length-1,1) for the first do this names.splice(0,1)
}



function clearAndShow () {    
    var printd=""  
    nameInput.value = "";
    messageBox.innerHTML = "";
    names.forEach(function(element){
    if(element != ''){

        var _span = document.createElement('span');
        
        _span.id = '_spanId'
        $('_spanId').css('border-style',solid');
        $('_spanId').css('border-color',blue');
        $('_spanId').css('width',50+'px');
        $('_spanId').css('margin-left',5+'px');

        _span[0].appendChild(document.createTextNode(element))
        messageBox[0].appendChild(_span)

        printd += "''"  + element +  "'', ";

        document.getElementById("labelprint").innerHTML = printd
     }  
  })
}

Answer 2

我已经尝试实现一些我希望它接近你正在寻找的东西：

HTML：

<div class="container">
  
  <form>
    <h1>Add new slider</h1>
    <input id="sliderName" type="text" />
    <input type="button" value="Add" onclick="insertSlider()" /> 
  </form>

  <div id="display"></div>
  
</div>

CSS：

h3 {
  color: rgb(0, 174, 255);
}

.container {
  border: solid 2px;
  display: block;
  margin-left: 200px;
  margin-right: 200px;
  margin-top: 50px;
}

JS：

let messageBox  = document.getElementById("display");


function deleteFn(id) {
  const element = document.getElementById(id)
  if(element) element.outerHTML="";
}

function onChangeSlideId(id){
  const elementSlide = document.getElementById('slider-'+id+'')
  if(elementSlide){
    const value = elementSlide.value
    const elementSlideText = document.getElementById('slider-value-'+id+'')
    elementSlideText.innerText = '('+value+')'
  }
}

    function insertSlider(){
      const name = document.getElementById("sliderName")
      const nameValue = name.value
      
      const newLabel = document.createElement('label')
      newLabel.setAttribute('for',nameValue)
      newLabel.innerText = nameValue

      const newSlider = document.createElement('input')
      newSlider.setAttribute('id','slider-'+nameValue+'')
      newSlider.setAttribute('type','range')
      newSlider.setAttribute('name',nameValue)
      newSlider.setAttribute('onchange','onChangeSlideId("'+nameValue+'")')
      
      const sliderValue = document.createElement('span')
      sliderValue.setAttribute('id','slider-value-'+nameValue+'')
      sliderValue.innerText = '('+newSlider.value+')'
      
            const newContainer = document.createElement('div')
      newContainer.setAttribute('id',nameValue)
            newContainer.setAttribute('style','display: grid')

       newContainer.appendChild(newSlider)
      newContainer.appendChild(newLabel)
      newContainer.appendChild(sliderValue)
      
      
      const newDeleteButton = document.createElement('input')
      newDeleteButton.setAttribute('type', 'button')
      newDeleteButton.setAttribute('value', 'Delete ' + nameValue + '')
      newDeleteButton.setAttribute('onclick',  'deleteFn("'+nameValue+'")')
      
       
      newContainer.appendChild(newDeleteButton)
      
      messageBox.appendChild(newContainer)
    }

你可以在这个codepen自己试一试