Skip to content
Advertisement

Newly created div goes to the bottom of the (Ii) list instead in to the selected (li) element?

I will go straight to the issue first concept: I want a div to be created once a user press an icon in a certain area of the html. my most achieving is that the div get created but I want the creation to be index specific instead it goes to the bottom of the Li list which has some other items also I was able to show it inside the li element as well but it doesn’t sere my purpose I want the div to appear right under the li element that has the icon that has been just clicked matching this patter

// if first icon clicked the UI must look like following Ul LI Div Are you sure ??? LI LI UL

any idea ? thanks for help.

function removeDay() {
  // Select all trash cans 
  let trash = document.getElementsByClassName('fa-trash-alt');
  let divs = document.getElementsByClassName("day-row");
  //Foorloop all trash cans on visible elemenst
  for (let i = 0, len = trash.length; i < len; i++) {
    (function(index) {
      trash[i].onclick =
        function() {

          //new div should apper under the the li element asking you if you are cool with delete
          const areYouSure = `<div class="areYouSure faderin">
          <p>Are you sure ?</p>
          <span>Yes</span>
          <span>No</span>
          </div>`
          this.parentElement.parentElement.innerHTML += areYouSure;
          // if user select yes then do the folowing 
          // if user selen no then don't do anything 
          //alert(index); Helpfull !! 
          //setting timeout for the emlement to remove element an effect 
          //setTimeout(function () { divs[i].style.display = "none"; }, 2000);
          //setTimeout(function () { divs[i].classList.add("faderclick") }, 1000);*/
        }
    })(i);
  }
}
removeDay()
<li id="Days" class="day-row">
  <div class="dayFunction">
    <i class="fas fa-trash-alt"></i>
    <i class="fas fa-archive"></i>
  </div>
</li>
<li id="Days" class="day-row">
  <div class="dayFunction">
    <i class="fas fa-trash-alt"></i>
    <i class="fas fa-archive"></i>
  </div>
</li>

<li id="Days" class="day-row">
  <div class="dayFunction">
    <i class="fas fa-trash-alt"></i>
    <i class="fas fa-archive"></i>
  </div>
</li>

Advertisement

Answer

You could achieve your goal through CSS, so i added to your original divs a display style as a flexbox by using style attribute style="display:flex;" and set the message div to margin-left with 1rem, using style="margin-left:1rem;" so you can have your message in the same line beside your icons with 1rem gap.

Try the snippet, best of luck =)

EDIT : As per your request, appended the message to the <li> and added display:inline; to the div to keep showing in the same line.

Also added a console log check for the first <li>

function removeDay() {
  // Select all trash cans 
  let trash = document.getElementsByClassName('fa-trash-alt');
  let divs = document.getElementsByClassName("day-row");
  //Foorloop all trash cans on visible elemenst
  for (let i = 0, len = trash.length; i < len; i++) {
    (function(index) {
      trash[i].onclick =
        function() {

          //new div should apper under the the li element asking you if you are cool with delete
          const areYouSure = `<div class="areYouSure faderin" style="display:inline;margin-left:1rem;">
          Are you sure ?
          <span>Yes</span>
          <span>No</span>
          </span>`
          this.parentElement.outerHTML += areYouSure;
                  console.log(document.querySelector('li').innerHTML);

          // if user select yes then do the folowing 
          // if user selen no then don't do anything 
          //alert(index); Helpfull !! 
          //setting timeout for the emlement to remove element an effect 
          //setTimeout(function () { divs[i].style.display = "none"; }, 2000);
          //setTimeout(function () { divs[i].classList.add("faderclick") }, 1000);*/
        }
    })(i);
  }
}
removeDay()
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<script src='https://kit.fontawesome.com/a076d05399.js'></script>


<li id="Days" class="day-row" style="display:flex;">
  <div class="dayFunction">
    <i class="fas fa-trash-alt"></i>
    <i class="fas fa-archive"></i>
  </div>
</li>
<li id="Days" class="day-row" style="display:flex;">
  <div class="dayFunction">
    <i class="fas fa-trash-alt"></i>
    <i class="fas fa-archive"></i>
  </div>
</li>

<li id="Days" class="day-row" style="display:flex;">
  <div class="dayFunction">
    <i class="fas fa-trash-alt"></i>
    <i class="fas fa-archive"></i>
  </div>
</li>
Advertisement