Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Aug 2012
    Location
    France
    Posts
    60
    Thanks
    15
    Thanked 0 Times in 0 Posts

    dynamically generated self destruct button

    I am generating lines in an order form dynamically, and would like to add a delete button to each one. I can't seem to get it to work, and am puzzled by the unexpected result of console.log at line 49.
    [CODE]
    lineNumber = 0;
    // this function posts order line to order div
    function postOrderLine() {
    //update lineNumber
    lineNumber = lineNumber +1;
    // create a line to put data from lineDiv into
    var newOrderLine = document.createElement("p");
    newOrderLine.setAttribute("class", "line");
    newOrderLine.setAttribute("id", "line" + lineNumber);

    // make remove line button
    var deleteLine = document.createElement("button");
    deleteLine.setAttribute("class", "type5");
    deleteLine.setAttribute("onclick", "removeLine(line" + lineNumber + ")");
    newOrderLine.appendChild(deleteLine);
    // create span for quantity
    var orderLineQ = document.createElement("span");
    orderLineQ.innerHTML = document.getElementById('quantity').value;
    newOrderLine.appendChild(orderLineQ);
    // create span for product
    var product = document.createElement("span");
    product.innerHTML = document.getElementById('product').innerHTML;
    newOrderLine.appendChild(product);
    // create span for price
    var price = document.createElement("span");
    price.innerHTML = document.getElementById('productPrice').innerHTML;
    newOrderLine.appendChild(price);
    // create span for sellBy
    var sellby = document.createElement("span");
    sellby.innerHTML = document.getElementById('productSellBy').innerHTML;
    newOrderLine.appendChild(sellby);
    // create span for notes
    var notes = document.createElement("span");
    notes.innerHTML = "  " + document.getElementById('productNotes').value;
    newOrderLine.appendChild(notes);


    document.getElementById('orderP').appendChild(newOrderLine);


    //display line number
    //alert("line" + lineNumber);
    console.log("line" + lineNumber);
    document.getElementById('lineNumberDisplay').innerHTML = lineNumber;
    }

    // this function removes a line from order
    function removeLine(lineToRemove) {
    console.log(lineToRemove);
    /* at this point lineToRemove reads <p id="line1" class="line"> not line1 ???
    * hard coded below deletes line just fine
    */
    var elem = document.getElementById('line1');
    //var elem = document.getElementById("/'" + lineToRemove + "/'");
    elem.parentNode.removeChild(elem);
    }
    [CODE]
    I'm probably a bit out of my depth, but you've got to have a go to learn!
    any hints gratefully received
    cheers
    A talent for speaking differently, rather than for arguing well, is the chief instrument of cultural change. Richard Rorty

  • #2
    Regular Coder
    Join Date
    Mar 2008
    Location
    London
    Posts
    152
    Thanks
    4
    Thanked 42 Times in 42 Posts
    Replace following line -
    PHP Code:
    deleteLine.setAttribute("onclick""removeLine(line" lineNumber ")"); 
    with this one (added single quotes in function parameter) -
    PHP Code:
    deleteLine.setAttribute("onclick""removeLine('line" lineNumber "')"); 

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,535
    Thanks
    3
    Thanked 513 Times in 500 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <script type="text/javascript">
    
    lineNumber = 0;
    // this function posts order line to order div
    function postOrderLine() {
    //update lineNumber
     lineNumber = lineNumber +1;
    // create a line to put data from lineDiv into
     var newOrderLine = document.createElement("p");
     newOrderLine.setAttribute("class", "line");
     newOrderLine.setAttribute("id", "line" + lineNumber);
    
    // make remove line button
     var deleteLine = document.createElement("button");
     deleteLine.className= "type5";
     deleteLine.value='delete'+lineNumber;
     deleteLine.onclick=function(){ removeLine(this); }
     newOrderLine.appendChild(deleteLine);
    // create span for quantity
     var orderLineQ = document.createElement("span");
     orderLineQ.innerHTML = document.getElementById('quantity').value;
     newOrderLine.appendChild(orderLineQ);
    // create span for product
     var product = document.createElement("span");
     product.innerHTML = document.getElementById('product').innerHTML;
     newOrderLine.appendChild(product);
    // create span for price
     var price = document.createElement("span");
     price.innerHTML = document.getElementById('productPrice').innerHTML;
     newOrderLine.appendChild(price);
    // create span for sellBy
     var sellby = document.createElement("span");
     sellby.innerHTML = document.getElementById('productSellBy').innerHTML;
     newOrderLine.appendChild(sellby);
    // create span for notes
     var notes = document.createElement("span");
     notes.innerHTML = "&nbsp;&nbsp;" + document.getElementById('productNotes').value;
     newOrderLine.appendChild(notes);
    
    
     document.getElementById('orderP').appendChild(newOrderLine);
    
    
    //display line number
    //alert("line" + lineNumber);
    //console.log("line" + lineNumber);
    //document.getElementById('lineNumberDisplay').innerHTML = lineNumber;
    }
    
    // this function removes a line from order
    function removeLine(obj) {
     obj.parentNode.parentNode.removeChild(obj.parentNode);
    }
    
    </script></head>
    
    <body>
    <input id="quantity" value="ee" />
    <input id="product" value="ee" />
    <input id="productPrice" value="ee" />
    <input id="productSellBy" value="ee" />
    <input id="productNotes" value="ee" />
    <input id="lineNumberDisplay" value="ee" />
    <input type="button" name="" value="More" onmouseup="postOrderLine()" />
    <div id="orderP"></div>
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    oddshoes (07-05-2013)

  • #4
    New Coder
    Join Date
    Aug 2012
    Location
    France
    Posts
    60
    Thanks
    15
    Thanked 0 Times in 0 Posts

    Thumbs up worked straight out of the box

    many thanks - I knew there would be a better way to do this. So much to learn!
    A talent for speaking differently, rather than for arguing well, is the chief instrument of cultural change. Richard Rorty


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •