javascript - jQuery - 删除值复选框选择

Question

当选择复选框时附加 new-div 时，如何删除 .loc-pr-wrap 内的文本值？

我希望在未进行任何选择时显示文本，并在进行任何选择时消失。

$("input.loc-check").change(function(event) {
  var value = $(this).val();
  if ($(this).is(":checked")) {
    $(".loc-pr-wrap").append(
      $(this)
      .next()
      .clone()
      .wrapAll("<div class='new-div'></div>")
      .parent()
      .addClass(value)
    );
  } else {
    $(".loc-pr-wrap ." + value).remove();
  }
});

.loc-pr-wrap {
  display: flex;
  padding: 20px;
  flex-direction: row;
  border: 1px solid;
}

.new-div {
  display: block;
  position: relative;
  border: 1px solid;
  height: 30px;
  width: 30px;
}

#loc-selected {
  height: 50px;
  width: 50px;
}

#loc-checkboxs {
  display: flex;
  padding: 20px;
}

#loc-checkboxs label {
  display: block;
  height: 38px;
  width: 38px;
  cursor: pointer;
  position: relative;
}

#loc-checkboxs label+label {
  margin-left: 25px;
}

#loc-checkboxs input[type="checkbox"] {
  opacity: 0;
  position: absolute;
}

#loc-checkboxs input[type="checkbox"]+span {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  color: #b3cefb;
  border-radius: 50%;
}

#loc-checkboxs input[type="checkbox"]:checked+span {
  border: 2px solid #4285f4;
  padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="loc-checkboxs">
  <label for="usa">
	<input class="loc-check" type="checkbox" id="usa" value="usa"/>
			<span><img src="https://uploads-ssl.webflow.com/57e5747bd0ac813956df4e96/5a2f052996bde90001f96632_united-states-of-america.svg" \></span>
		</label>
  <label for="canada">
	<input class="loc-check" type="checkbox" id="canada" value="canada"/>
			<span><img id="img-canada" src="https://uploads-ssl.webflow.com/57e5747bd0ac813956df4e96/5a2cd7b0937442000184b147_canada.svg" \></span>
		</label>
  <label for="uk">
			<input class="loc-check" type="checkbox" id="uk" value="uk"/>
			<span><img id="img-uk" src="https://uploads-ssl.webflow.com/57e5747bd0ac813956df4e96/5a985a90ec8f79000104514a_united-kingdom.svg" \></span>
		</label>
</div>
<div class="loc-pr-wrap">
  remove
</div>

Answer 1

首先，我建议将“删除”文本包装在其自己的<span>中以便它很容易被瞄准。

<span class="remove-text">remove</span>

接下来，您可以使用.length确定是否有.new-div元素。如果是这样，.hide() remove文本。否则，.show() remove文本。

var $removeText = $(".remove-text");
var $newDiv = $(".new-div");
$newDiv.length ? $removeText.hide() : $removeText.show();

<小时/>

演示

$("input.loc-check").change(function(event) {
  var value = $(this).val();
  if ($(this).is(":checked")) {
    $(".loc-pr-wrap").append(
      $(this)
      .next()
      .clone()
      .wrapAll("<div class='new-div'></div>")
      .parent()
      .addClass(value)
    );
  } else {
    $(".loc-pr-wrap ." + value).remove();
  }

  var $removeText = $(".remove-text");
  var $newDiv = $(".new-div");
  $newDiv.length ? $removeText.hide() : $removeText.show();

});

.loc-pr-wrap {
  display: flex;
  padding: 20px;
  flex-direction: row;
  border: 1px solid;
}

.new-div {
  display: block;
  position: relative;
  border: 1px solid;
  height: 30px;
  width: 30px;
}

#loc-selected {
  height: 50px;
  width: 50px;
}

#loc-checkboxs {
  display: flex;
  padding: 20px;
}

#loc-checkboxs label {
  display: block;
  height: 38px;
  width: 38px;
  cursor: pointer;
  position: relative;
}

#loc-checkboxs label+label {
  margin-left: 25px;
}

#loc-checkboxs input[type="checkbox"] {
  opacity: 0;
  position: absolute;
}

#loc-checkboxs input[type="checkbox"]+span {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  color: #b3cefb;
  border-radius: 50%;
}

#loc-checkboxs input[type="checkbox"]:checked+span {
  border: 2px solid #4285f4;
  padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="loc-checkboxs">
  <label for="usa">
	<input class="loc-check" type="checkbox" id="usa" value="usa"/>
			<span><img src="https://uploads-ssl.webflow.com/57e5747bd0ac813956df4e96/5a2f052996bde90001f96632_united-states-of-america.svg" \></span>
		</label>
  <label for="canada">
	<input class="loc-check" type="checkbox" id="canada" value="canada"/>
			<span><img id="img-canada" src="https://uploads-ssl.webflow.com/57e5747bd0ac813956df4e96/5a2cd7b0937442000184b147_canada.svg" \></span>
		</label>
  <label for="uk">
			<input class="loc-check" type="checkbox" id="uk" value="uk"/>
			<span><img id="img-uk" src="https://uploads-ssl.webflow.com/57e5747bd0ac813956df4e96/5a985a90ec8f79000104514a_united-kingdom.svg" \></span>
		</label>
</div>
<div class="loc-pr-wrap">
  <span class='remove-text'>remove</span>
</div>