CODEWITHSUNDEEP
javascriptjquery
art
art

Reputation: 59

Remove specific appended element

Lets say I have checkboxes(a, b, c), if one checkbox is checked (for example b) then I append its copy to an "x" class, the question is "How do I remove created copy of (b) on initial checkbox uncheck?". By the moment I am removing all the created elements because I do not know other solution. https://jsfiddle.net/qnsgbyra/12/

$("input:checkbox").on("change", function() {
  if ($(this).prop('checked') == true) {
    $element = $(this).parent().clone().appendTo("body").addClass("new");
    $(".new input").remove();
  }
  if ($(this).prop('checked') == false) {
    $(".new").remove();
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="users">
  <label><input type="checkbox" name="1"><img draggable="false" src="https://via.placeholder.com/50x50" alt="1"></label>
</div>
<div class="users">
  <label><input type="checkbox" name="2"><img draggable="false" src="https://via.placeholder.com/60x60" alt="2"></label>
</div>
<div class="users">
  <label><input type="checkbox" name="3"><img draggable="false" src="https://via.placeholder.com/70x70" alt="1"></label>
</div>

Upvotes: 1

Views: 73

Answers (2)

BrTkCa
BrTkCa

Reputation: 4783

You can remove the element based on the img source:

var src;

$("input:checkbox").on("change", function() {
  if ($(this).prop('checked') == true) {
    $(this).parent().clone().appendTo("body").addClass("new");
    $(".new input").remove();
  } else {
    src = $(this).parent().find('img:first').prop('src');
    $(".new").find('[src="' + src + '"]').remove();
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="users">
  <label><input type="checkbox" name="1"><img draggable="false" src="https://via.placeholder.com/50x50" alt="1"></label>
</div>
<div class="users">
  <label><input type="checkbox" name="2"><img draggable="false" src="https://via.placeholder.com/60x60" alt="2"></label>
</div>
<div class="users">
  <label><input type="checkbox" name="3"><img draggable="false" src="https://via.placeholder.com/70x70" alt="1"></label>
</div>

Upvotes: 1

A.K.
A.K.

Reputation: 2322

When you add element Just create a unique class on the newly added element and when uncheck the checkbox remove the element using the new class.

In this answer, I create the unique class using input checkbox name. so new class is "new"+Checkbox_name

	$("input:checkbox").on("change", function() {
		 if ($(this).prop('checked')==true){ 
			$element = $(this).parent().clone().appendTo("body").addClass("new"+$(this).attr('name'));
      $(".new"+$(this).attr('name')+" input").remove();
		}
		 if ($(this).prop('checked')==false){ 
			$(".new"+$(this).attr('name')).remove();
		}
	});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="users">
<label><input type="checkbox" name="1"><img draggable="false" src="https://via.placeholder.com/50x50" alt="1"></label>
</div>
<div class="users">
<label><input type="checkbox" name="2"><img draggable="false" src="https://via.placeholder.com/60x60" alt="2"></label>
</div>
<div class="users">
<label><input type="checkbox" name="3"><img draggable="false" src="https://via.placeholder.com/70x70" alt="1"></label>
</div>

Upvotes: 1

Related Questions