Question

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

我希望在没有选择时显示文本，而在没有选择时消失。

$("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>

Answer 2

如果未选中.append），只需将.html替换为$('input.loc-check并设置文本。

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

在添加任何标志之前，请用$(".loc-pr-wrap").html('');清空容器：

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

.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>

很明显，这一次只能在容器中个标志。

jQuery-删除值复选框选择

3 个答案:

演示