jQuery - Remove value checkbox selection

Question

How do I remove the text value inside of the .loc-pr-wrap when the new-div is appended upon checkbox selection?

I want to have the text appear when no selections are made, and disappear when any selection is made.

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

Tyler Roper · Accepted Answer · 2018-07-24 03:47:59Z

First, I'd suggest wrapping the "remove" text in its own <span> so that it's easily targeted.

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

Next, you can use .length to determine if there are any .new-div elements. If so, .hide() the remove text. Otherwise, .show() the remove text.

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

Demo

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

Elish · Accepted Answer · 2018-07-24 10:52:08Z

Just replace .append with .html and set the text if $('input.loc-check) is not checked.

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

Razvan Zamfir · Accepted Answer · 2018-07-24 12:57:32Z

Before apending any flag, empty the container with $(".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>

Obviously, this will allow only one flag at a time in the container.

Collectives™ on Stack Overflow

jQuery - Remove value checkbox selection

3 Answers 3

Demo

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Demo

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related