Question

我是JavaScript的新手，但已经设法拼凑出一个基于所选复选框返回结果的基本表单，我遇到的问题是当只勾选一些方框时，我从空div中获取空白未选中的复选框。

我真的很感激有关如何删除空div的任何建议。

我正在使用的代码如下，但您也可以在Codepen上看到一个粗略的示例。

新手JavaScript和HTML：

function checkbox() {
  var finance = document.getElementById("finance").checked;;
  var HR = document.getElementById("HR").checked;
  var Procurement = document.getElementById("Procurement").checked;


  if (finance) document.getElementById("res1").innerHTML = "Some info";
  if (HR) document.getElementById("res2").innerHTML = "Some info";
  if (Procurement) document.getElementById("res3").innerHTML = "Some info";

  return false;
}

<form>
  <input type="checkbox" id="finance" name="Manager" value="Finance"><label for="finance">Finance</label>
  <input type="checkbox" id="HR" name="Manager" value="HR"><label for="HR">HR</label>
  <input type="checkbox" id="Procurement" name="Manager" value="Procurement"><label for="Procurement">Procurement</label>
  <input type="submit" value="See Training" size="30" onClick="return checkbox();">
  <input type="submit" value="Reset" size="30" onClick="return reset();">
</form>

<div id="res1"></div>
<div id="res2"></div>
<div id="res3"></div>

Answer 1

额外<div> s不占用空间。他们之后的<br> s正在添加额外的换行符。

只需从原始HTML中删除<br>，然后将它们放在您做填充的div中（当您填充它们时）。

Answer 2

因此，有几种不同的方法可以实现这一目标。在你的javascript中你将内容添加到div中，你可以添加else语句来隐藏/删除冗余的div，或者在你添加了所有必需的内容后，你可以遍历你的div并隐藏/删除任何没有内容。

我建议不要删除div，因为这意味着每次重置你都需要添加它们。相反，您可以添加样式display: none 这将从DOM中删除它们，从而删除空格。

另一条建议 - 不要在你的div之后使用<br />标签。默认情况下，Div是块，并在之后强制换行。如果您需要更多空间，最好添加下边距。

以下是您的codepen的编辑版本，它隐藏了任何不需要的div。

function checkbox() {
  var finance = document.getElementById("finance").checked;
  var HR = document.getElementById("HR").checked;
  var Procurement = document.getElementById("Procurement").checked;
  var Appraisal = document.getElementById("Appraisal").checked;
  var HS = document.getElementById("HS").checked;
  var MSS = document.getElementById("MSS").checked;

  if (finance){
    document.getElementById("res1").innerHTML =
      "<strong>Finance</strong><br/>Finance Results";
  }else{
    document.getElementById("res1").classList.add("hide");
  }
  if (HR){
    document.getElementById("res2").innerHTML = "<b>HR</b><br/>HR Results";
  }else{
    document.getElementById("res2").classList.add("hide");
  }
  if (Procurement){
    document.getElementById("res3").innerHTML =
      "<b>Procurement</b><br/>Procurement Results";
  }else{
    document.getElementById("res3").classList.add("hide");
  }
  if (Appraisal){
    document.getElementById("res4").innerHTML =
      "<b>Appraisal</b><br/>Appraisal Results";
  }else{
    document.getElementById("res4").classList.add("hide");
  }
  if (HS) {
    document.getElementById("res5").innerHTML =
      "<b>Health & Safety</b><br/>Health & Safety Results";
  } else {
    document.getElementById("res5").classList.add("hide");
  }
  if (MSS) {
    document.getElementById("res6").innerHTML = "<b>MSS</b><br/>MSS Results";
  } else {
    document.getElementById("res6").classList.add("hide");
  }

  return false;
}

input[type="checkbox"] + label {
  position: absolute;
  width: 30px;
  height: 30px;
  border: 5px solid #555;
  border-radius: 50%;
  left: 50px;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-transition: all ease-out 200ms;
  transition: all ease-out 200ms;
  text-indent: 45px;
  font: normal normal 25px/40px "Helvetica";
  white-space: nowrap;
  color: #555;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

input[type="checkbox"] + label:after {
  content: "";
  position: absolute;
  width: 0px;
  height: 13px;
  border-bottom: 5px solid #22b573;
  border-left: 5px solid #22b573;
  top: 25%;
  left: 50%;
  -webkit-transform-origin: bottom left;
          transform-origin: bottom left;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  opacity: 0;
  -webkit-transition: all ease-out 200ms;
  transition: all ease-out 200ms;
}

input[type="checkbox"]:checked + label {
  border: 5px solid #22b573;
}

input[type="checkbox"]:checked + label:after {
  opacity: 1;
  width: 35px;
}

#finance {
  display: none;
}

#HR {
  display: none;
}

#Procurement {
  display: none;
}

#Appraisal {
  display: none;
}

#HS {
  display: none;
}

#MSS {
  display: none;
}

.hide{
  display: none;
}

<p>I need information about:</p><br/>
<form>
    <input type="checkbox" id="finance" name="Manager" value="Finance"><label for="finance">Finance</label><br/><br/><br/>
    <input type="checkbox" id="HR" name="Manager" value="HR"><label for="HR">HR</label><br/><br/><br/>
    <input type="checkbox" id="Procurement" name="Manager" value="Procurement"><label for="Procurement">Procurement</label><br/><br/><br/>
    <input type="checkbox" id="Appraisal" name="Manager" value="Appraisal"><label for="Appraisal">Appraisal</label><br/><br/><br/>
    <input type="checkbox" id="HS" name="Manager" value="Hs"/><label for="HS">Health & Safety</label><br/><br/><br/>
    <input type="checkbox" id="MSS" name="Manager" value="MSS"><label for="MSS">MSS</label><br/><br/><br/>
    <input type="submit" value="See Training" size="30" onClick="return checkbox();">
    <input type="submit" value="Reset" size="30" onClick="return reset();">
</form><br/>
<div id="mandatory"><b>Mandatory</b><br/>The mandatory training all managers have to do</div><br/>
<div id="res1"></div>
<div id="res2"></div>
<div id="res3"></div>
<div id="res4"></div>
<div id="res5"></div>
<div id="res6"></div>

Answer 3

有几个步骤

你需要得到所有的div
遍历div并找到空的
使用remove()删除节点。

小提琴：https://jsfiddle.net/3snod1ry/

const divs = document.querySelector('div');

divs.forEach(div => {
  if (divs.innerHTML === '') {
    div.remove();
  }
});

Answer 4

这里有一种更好的方法，它更具动态性，应解决在div中没有内容时获取空间的问题。这样，您就不必测试任何特定的复选框，并将其与特定的div匹配。

此外，您使用的submit按钮类型为reset按钮，这是不对的，您不应使用内联HTML事件属性（onsubmit，{{1}等等 a number of reasons why 。相反，使用现代的，基于标准的方法并保持HTML清洁。

请参阅下面的其他评论：

onclick

// Get all the checkboxes and div elements into respective arrays:
var chks = Array.from(document.querySelectorAll("input[type=checkbox]"));
var divs = Array.from(document.querySelectorAll("div.output"));

// Get reference to Reset button
var reset = document.querySelector("input[type=reset]");

// Loop over all the checkboxes...
chks.forEach(function(box){

  // Assign each one a click event handler:
  box.addEventListener("click", function checkbox(evt) {
    // Get the index of the position of the checkbox in the checkbox array
    var idx = chks.indexOf(box);
  
    if(box.checked){
     // Populate the corresponding div in its array and unhide it:
     divs[idx].textContent = box.value;
     divs[idx].classList.remove("hidden");
    } else {
     // The box is unchecked, so re-hide it
     divs[idx].classList.add("hidden");  
    }
  });

});

reset.addEventListener("click", function(){
  // Loop over the divs and hide each of them:
  divs.forEach(function(div){
   div.classList.add("hidden"); 
  });
});

/* All the divs related to checkboxes are hidden by default */
.hidden { display:none; }

使用JavaScript删除Empty <div>

4 个答案: