Mutation Observer

JavaScript
23

Means this is the code:

      <li>
    <input type='text' class='color1' value='item1'>
    <button class='delete'>Delete</button>
  </li>
  <li>
    <input type='text' class='color2' value='item2'>
    <button class='delete'>Delete</button>
  </li>
  <li>
    <input type='text' class='color3' value='item3'>
    <button class='delete'>Delete</button>
  </li>
  <li>
    <input type='text' class='color4' value='item4'>
    <button class='delete'>Delete</button>
  </li>
  <li>
    <input type='text' class='color5' value='item5'>
    <button class='delete'>Delete</button>
  </li>
  <li>
    <input type='text' class='color6' value='item6'>
    <button class='delete'>Delete</button>
  </li>

    Explanation:

    Suppose now if we delete with class=color4, then actually coolor4 will not be absent, but the final output in the browser will be:

     <li>
    <input type='text' class='color1' value='item1'>
    <button class='delete'>Delete</button>
  </li>
  <li>
    <input type='text' class='color2' value='item2'>
    <button class='delete'>Delete</button>
  </li>
  <li>
    <input type='text' class='color3' value='item3'>
    <button class='delete'>Delete</button>
  </li>
  <li>
    <input type='text' class='color4' value='item4'>
    <button class='delete'>Delete</button>
  </li>
  <li>
    <input type='text' class='color5' value='item5'>
    <button class='delete'>Delete</button>
  </li>
  <li>

    so in a way on every click of deleting the last li element is pushed out of the serial.
    last, in this case, was with class color6, in next delete whichever button is clicked the last will be deleted(as it will appar to us in the final browser):

    color5
    color4
    color3

24

25

[offtopic]
I know its not the point but if you styled the items in css using :nth-child then you can let css do it automatically.

e.g.

li:nth-child(1) input,
.color1 {
  background-color: #4000ff;
}

li:nth-child(2) input,
.color2 {
  background-color: #8000ff;
}
li:nth-child(3) input,
.color3 {
  background-color: #bf00ff;
}
li:nth-child(4) input,
.color4 {
  background-color: #ff00ff;
}
li:nth-child(5) input,
.color5 {
  background-color: #ff00bf;
}
li:nth-child(6) input,
.color6 {
  background-color: #ff0080;
}

Assuming you have removed the classed from the inputs of course. I know styling wasn’t the point of the exercise but just wanted to say :slight_smile:

[/offtopic]

3 Likes
26

Great, so on any delete operation, our task is to program so that the last child of ol is deleted.

27

Why do you come to that logic?

If I push the delete button on Row 3… I want to delete Row 3, not Row 5. I want the data I have input into row 4 to now be on row 3.

2 Likes
28

1,2,3,4,5,6
1,2,3,4,5
1,2,3,4
1,2,3
1,2
1

classes are arranged in this order on every delete operation, subsequently.

29

The classes are, yes.

But there’s an <input> in that row.

Type “Here I am” in the last input, and click the delete button in Row 3.

Where’d your data go?

1 Like
30

As long as we are deleting from the bottom. Isn’t everything in place? Classes + text?

31


I got it OP doesn’t want to change the text when deleted and bottom item pushed up.

1 Like
32

The OP’s head isn’t with it at the moment. I think a break from the screen and a stiff drink is called for.

3 Likes
34

Hi there,

I merged @PaulOB css + small JS:

Its working:

document.querySelector('#parent').addEventListener('click', function(e) {
  var removeTarget = e.target.parentNode;
  removeTarget.parentNode.removeChild(removeTarget);
}, false);
1 Like
35

var removeTarget = e.target.parentNode = this will give the parent of the element where the click has occurred in this case li.

removeTarget.parentNode = ol`

emoveTarget.parentNode.removeChild = These are all `li

If we change this →

removeTarget.parentNode.removeChild(removeTarget);
to
removeTarget.parentNode.removeChild();

All children(li) should delete, but that is not happening.

36

That’s asking the parent node to remove a child, without telling it what child to remove. That is not going to work.

A simpler way is to use the remove method instead of removeChild.

  var removeTarget = e.target.parentNode;
  removeTarget.remove();

That works, but the removeTarget name is somewhat confusing.

We can help to alleviate some of that confusion by making it more explicit what e.target is.

  var deleteButton = e.target;
  deleteButton.parentNode.remove();

That way, we now know that it’s the button parent that is being removed, which in this case is the <li> element.

2 Likes
37

Thanks.

Agree!
removeTarget was slightly misleading.

39

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.