CODEWITHSUNDEEP
javascriptjquery
Spencer K.
Spencer K.

Reputation: 469

JS: Target and remove dynamically added element

I assume this is a common problem, but I haven't been able to find the answer in other threads.

The basic idea / goal here is that if a task is marked as important, it gets added to quadrant1. If it isn't, it gets added to quadrant2. When tasks are completed, they can be closed out by clicking on them.

HTML: I have a simple page with:

JS:

$(document).ready( function () {
  $('#submitTask').on("click", function() {
    var task = $("#task").val();
    var important = $("#important").prop("checked");

    var addToQuadrant = function (task, important) {
      if (important == true) {
        $("#quadrant1").append(
          "<p class='taskHolder'> " + task + " </p>");
      } else if (important == false) {
        $("#quadrant2").append(
          "<p class='taskHolder'> " + task + " </p>");
      }
    });
  });

  addToQuadrant(task, important);

  $('body').on('click', '.taskHolder', function () {
    $('.taskHolder').slideUp();
  });
});

My problem is that since I use the same id (i.e. "taskHolder") for both paragraph elements, if I add more than one task to my page at a time, I can't remove more than one of them.

My question is: how can I dynamically add an element to the DOM while also giving it a unique id or selector so every task can be uniquely targeted and closed out?

Upvotes: 1

Views: 145

Answers (4)

nnnnnn
nnnnnn

Reputation: 150030

Use:

$(this).slideUp();

instead of

$('.taskHolder').slideUp();

Within the event handler this references the element that the event applied to.

The following is the minimal code I'd use to implement your whole thing:

$(document).ready(function() {
  var task = $("#task");
  var cb = $("#important");
  
  $("button").click(function() {
    $("<p></p>", {
      text: task.val(),
      "class": "task"
    }).appendTo(cb[0].checked ? "#quadrant1" : "#quadrant2");
  });
  
  $("body").on("click", ".task", function() {
    $(this).slideUp(500, function(){ $(this).remove(); });
  });  
});
div { border: thin black solid; margin: 4px; min-height: 20px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label>Task: <input id="task"></label>
<label><input type="checkbox" id="important"> Important</label>
<button>Add</button>
<div id="quadrant1"></div>
<div id="quadrant2"></div>

Upvotes: 1

Nur S
Nur S

Reputation: 51

  • Use unique id
  • Target item with $(this) to hide on complete.

$(document).ready( function () {
  
      var addToQuadrant = function (task, important) {
    			
          if (important == true) {
          	var taskid = $("#quadrant1").length + 1;
            $("#quadrant1").append(
              "<p class='taskHolder' id='task-"+taskid+"'> " + task + " </p>");
          } else if (important == false) {
          	var imptaskid = $("#quadrant2").length + 1;
            $("#quadrant2").append(
              "<p class='taskHolder' id='imp-task-"+imptaskid+"'> " + task + " </p>");
      		};
         };  
  
      $('#submitTask').on("click", function() {

        var task = $("#task").val();
        var important = $("#important").prop("checked");
        addToQuadrant(task, important);
      });    


      $('body').on('click', '.taskHolder', function () {
        $( this ).slideUp();
      });

    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    Important Task
    <div id="quadrant1" style="border:1px dotted;min-height:20px;margin-bottom: 10px">
      
    </div>
    Task
    <div id="quadrant2" style="border:1px dotted;min-height:20px;margin-bottom: 10px">
    </div>


    Task: <input type="text" id="task" />
    <input type="checkbox" id="important" /> Important
    <input type="button" value="Submit" id="submitTask" />

Upvotes: 1

Mohit Tanwani
Mohit Tanwani

Reputation: 6628

You need to apply the new ID for the each newly added element dynamically.

//New length every time you click
var newLength = $('[id^=taskHolder]').length + 1;
//Apply the new ID
$("#quadrant1").append(
     "<p id='taskHolder+newLength+'> New "  + newLength + " </p>");


$('#submitButton').click(function(){
    //New length every time you click
    var newLength = $('[id^=taskHolder]').length + 1;
    //Apply the new ID
    $("#quadrant1").append(
          "<p id='taskHolder+newLength+'> New "  + newLength + " </p>");
  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="quadrant1">
  <p id="taskHolder_1">New 1</p>  
</div>  
<button id="submitButton">Button</button>

Upvotes: 1

Sharif
Sharif

Reputation: 46

User a global variable 'counter' and increase its value at each click then append this with 'taskHolder'. Now you have unique id for each task.

To select use startwith type selector.

var cnt = 0;
$(document).ready( function () {
  $('#submitTask').on("click", function() {
    cnt++;
    var task = $("#task").val();
    var important = $("#important").prop("checked");

    var addToQuadrant = function (task, important) {
      if (important == true) {
        $("#quadrant1").append(
          "<p id='taskHolder" + cnt + "' > " + task + " </p>");
      } else if (important == false) {
        $("#quadrant2").append(
          "<p id='taskHolder" + cnt + "'> " + task + " </p>");
  };

  addToQuadrant(task, important);

  $('[id^=taskHolder]').on("click", function() {
     $(this).slideUp();
};

});

Alternative solution

A better solution could be common class to each of the tasks

 "<p class='commonClass" + cnt + "'> " + task + " </p>");

and 

$('body').on('click', '.taskHolder', function () {
    $(this).slideUp();
  });

Upvotes: 1

Related Questions