Remove Link

[Xtremer360]

Dropdown works and it also shows the correct lis in the UL. What is supposed to happen is when the user clicks on the Remove link its supposed to send the ID and characterName of the character getting removed up to the dropdown with the characterD as the value of the option and the characterName as the text. So far is that correct? As with the function that I've included?

 

 

<label for="charactersDrop">Characters</label>
            <select class="dropdown" name="charactersDrop" id="charactersDrop" title="Characters Dropdown">
                <option value="">- Select -</option>
                <?php
                    while ( $row = mysqli_fetch_array (  $charactersByHandlerResult, MYSQL_ASSOC ) ) { 
                        print "<option value=\"".$row['ID']."\">".$row['characterName']."</option>\r";
                    }
                ?>
            </select>
            <input type="button" value="Add Character" class="" onclick="HandlerCharacters()"/>
            <ul id="characterList">
              <?php mysqli_data_seek( $handlerResult, 0 ) ?>
              <?php while($row = mysqli_fetch_array ( $handlerResult, MYSQL_ASSOC )): ?>
                <li><?php echo htmlentities($row['characterName']); ?> <a href="#" onclick="removeCharacter(<?php echo $row['ID'] . ','. "'" . $row['characterName'] . "'"; ?>);">Remove</a></li>
              <?php endwhile; ?>
            </ul>  

 

 

function remove(characterID, characterName) {
        // Create a click handler for the anchor element
    	anchor.click( function() {
    		$( this ).parent().remove();
    		return false;  // makes the href in the anchor tag ignored
    	} );
        
        var option = = $( '<option value=' + characterID + '>' + characterName + '</opton>' );
        
        $( '#charactersDrop' ).append( option );
    }

[tomfmason]

You reference a function called removeCharacter in your onclick but the function posted is named remove. Also, I am not really sure why you are setting a new event handler in your remove function. The remove function should be the only event handler needed imo. Here is an example that should do what you are wanting.

 

function remove(characterID, characterName) {
        event.preventDefault();
        $(this).parent().remove();
        
        var option = = $( '<option value=' + characterID + '>' + characterName + '</opton>' );
        
        $( '#charactersDrop' ).append( option );
    }

 

You should also notice that I used event.preventDefault() which is a better common practice for preventing the default event handler(for links, forms ect.) than returning false.

 

[Xtremer360]

Thank you for your reply. I changed remove to removeCharacter to match up the correct function call with the onclick event on my form however with the rest of the code I'm getting a syntax error.

[Xtremer360]

I take that back its saying removeCharacter is not defined.

 

<label for="charactersDrop">Characters</label>
            <select class="dropdown" name="charactersDrop" id="charactersDrop" title="Characters Dropdown">
                <option value="">- Select -</option>
                <?php
                    while ( $row = mysqli_fetch_array (  $charactersByHandlerResult, MYSQL_ASSOC ) ) { 
                        print "<option value=\"".$row['ID']."\">".$row['characterName']."</option>\r";
                    }
                ?>
            </select>
            <input type="button" value="Add Character" class="" onclick="HandlerCharacters()"/>
            <ul id="characterList">
              <?php mysqli_data_seek( $handlerResult, 0 ) ?>
              <?php while($row = mysqli_fetch_array ( $handlerResult, MYSQL_ASSOC )): ?>
                <li><?php echo htmlentities($row['characterName']); ?> <a href="#" onclick="removeCharacter(<?php echo $row['ID'] . ','. "'" . $row['characterName'] . "'"; ?>);">Remove</a></li>
              <?php endwhile; ?>
            </ul>  

 

function removeCharacter(characterID, characterName) {
        event.preventDefault();
        $(this).parent().remove();
        
        var option = = $( '<option value=' + characterID + '>' + characterName + '</opton>' );
        
        $( '#charactersDrop' ).append( option );
    }

[tomfmason]

I believe the problem is with the quotes around your arguments in the onclick.

 

You have:

<a href="#" onclick="removeCharacter(<?php echo $row['ID'] . ','. "'" . $row['characterName'] . "'"; ?>);">Remove</a>

 

When it should be:

 

<a href="#" onclick="removeCharacter(<?php echo "'{$row['ID']}', '{$row['characterName']}'"; ?>);">Remove</a>

[Xtremer360]

I still continue to thank you for looking at the post however after thinking about it I found something I like that works and here it is however upon it removing and adding to the dropdown it adds it 3 times meaning 3 option tags. Why is that?

 

// Add a click handler to each anchor tag in the characterList <ul> element
    $('#characterList a').click( function(evt) {
        
        evt.preventDefault();

        var $this = $( this );   // 'this' in this context will be the anchor (<a>) element; the one that was clicked.

       

        // Grab the characterID and characterName from the <a> element. They are stored on it as html attributes.

        var characterID = $this.attr( 'characterID' );

        var characterName = $this.attr( 'characterName' );



        // Remove the parent <li> element

        $this.parent().remove();  

   

        // Re-add the option for the removed character to the character dropdown

        var option = $( '<option value="' + characterID + '">' + characterName + '</opton>' );

        $( '#charactersDrop' ).append( option );

    } );

 

<select class="dropdown" name="charactersDrop" id="charactersDrop" title="Characters Dropdown">
                <option value="">- Select -</option>
                <?php
                    while ( $row = mysqli_fetch_array (  $charactersByHandlerResult, MYSQL_ASSOC ) ) { 
                        print "<option value=\"".$row['ID']."\">".$row['characterName']."</option>\r";
                    }
                ?>
            </select>
            <input type="button" value="Add Character" class="" onclick="HandlerCharacters()"/>
            <ul id="characterList">
              <?php mysqli_data_seek( $handlerResult, 0 ) ?>
              <?php while($row = mysqli_fetch_array ( $handlerResult, MYSQL_ASSOC )): ?>
                <li><?php echo htmlentities($row['characterName']); ?> <a href="#" characterID="<?php echo $row['ID']; ?>" characterName="<?php echo htmlentities( $row['characterName'] ); ?>">Remove</a></li>
              <?php endwhile; ?>
            </ul>