title: remove the html tag by id using javascript
body: <p>I have 2 javascript functions , one to add items andd one to remove them . but the created (p) tag isn't removed and if I remove all items tags remain and given ids remain (selected1 , selected2 , ...etc) so how can I remove the complete tag and reset counter</p>
  
  <pre><code>var sum = 0;
  var total = 0;
  var i = 1;
  
  function additem(name, price) {
    document.getElementById("selecteditems").innerHTML += "&lt;p id='selected" + i + "'  &gt;" + name;
    document.getElementById("pr").innerHTML += "&lt;p id='p" + i + "'  &gt;" + price;
    document.getElementById("removebtn").innerHTML += "&lt;p id='B" + i + "'&gt;" + "&lt;button id='selected" + i + "' class='btn btn-danger' onclick='removeitem(" + i + " , " + price + " ) ' style='font-size: 15px; height: 20px; padding: 0px 0px 0px 0px;' &gt;Remove&lt;/button&gt; ";
    i++;
    sum += price;
  }
  
  function removeitem(i, price) {
  
    document.getElementById("selected" + i).innerHTML = "";
    document.getElementById("p" + i).innerHTML = "";
    document.getElementById("B" + i).innerHTML = "";
    sum -= price;
  }
  </code></pre>